Chips
Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
Default chips
Use class variant prop in <NubraChips /> component for different variant of chips and use disabled prop for disabled chips.
primary chip
secondary chip
Chips Disabled
Chips pill
Use pill prop in <NubraChips> component.
Primary Chips
Secondary Chips
Disabled Chips
Chips tick
Use tickedprop for ticked chips.
Ticked Chips
Ticked Chips
Disabled Chips
Chips with icon
Use icon={your_icon} element in <NubraChips> for icons in chips.
Chips outline
Use variant="outline-*".
Primary Chips
Secondary Chips
Primary Chips
Secondary Chips
Ticked Chips
Ticked Chips
Disabled Chips
Chips dismissable
Use dismissable prop in <NubraChips> for dismissable chips
Chips Dismissable
Chips Dismissable
Chips Dismissable
Chips Dismissable
Chips Dismissable
Chips Dismissable
User chips
Use <NubraChips src={img_src} > for user chips
Basic Chips
Basic Chips
Basic Chips
Basic Chips
Basic ChipsSizing
Use lg props in <HkChips> for lg chips.
Chips
Basic ChipsChips Lg
User Chips LgInput Chips
Below is the example of input chips.
Basic Chip1
Basic Chip2
Basic Chip3