Overview

Chips are used to add information, make selections or filter content. Chips should appear dynamically as a group of multiple interactive elements.

To Use Chip, add <Chip> component with variant like,

  • solid
  • outline
  • reverse

Use label for adding text and avatar, icon props for adding thumbnail & icon respectively.

Input Chips

For input chips use the prop type set to input.

Live Example

Chips with the onClose or dismissible prop defined will display a delete icon and can also use prop show to control the visibility of the chip.

Filter Chips

For Filter Chips, use the icon prop to define the icon.

Small Chips

To use a small chip, use size prop and use closeIcon props for custom close icon.

API

Chip

import Chip from `@trimbleinc/modus-react-bootstrap/Chip`
NameTypeDefaultDescription
avatar
element

Chip Avatar Element

closeIcon
element

Custom icon for closing the Chip

dismissible
boolean
controlled by: onClose, initial prop: defaultDismissible

states whether to display close button.

icon
element

Chip Icon Element

label
string

Label text inside Chip

onClose
function
controls show

Callback fired when alert is closed.

show
boolean
true
controlled by: onClose, initial prop: defaultShow

Controls the visual state of the Chip.

size
string
controlled by: onClose, initial prop: defaultSize

Controls the size Chip and its children.

type
string

Type that says what type of Chip

  • @type {'input' | 'filter' }
variant
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'

Chip visual variant