Explore Templates
Basic Chips
Basic Chips
Basic Chips
Basic Chips
Basic ChipsBasic ChipsUser Chips Lg
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 ChipsBasic ChipsBasic ChipsBasic ChipsBasic 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