Chip

Represents a complex entity in a compact form, such as an attribute, tag, or contact. Chips can be interactive, allowing for user input or triggering actions.

Basic Usage

Default chip styles and variants.

Chip defaultChip accentChip primaryChip secondaryChip tertiaryChip successChip dangerChip warningChip info

BasicUsage.tsx

<Row flexWrap>
  <Chip default>Chip default</Chip>
  <Chip accent>Chip accent</Chip>
  <Chip primary>Chip primary</Chip>
  <Chip secondary>Chip secondary</Chip>
  <Chip tertiary>Chip tertiary</Chip>
  <Chip success>Chip success</Chip>
  <Chip danger>Chip danger</Chip>
  <Chip warning>Chip warning</Chip>
  <Chip info>Chip info</Chip>
</Row>

Chip Sizes

Chips come in different sizes.

Chip xsChip smChip mdChip lgChip xl

ChipSizes.tsx

<Row flexWrap>
  <Chip xs>Chip xs</Chip>
  <Chip sm>Chip sm</Chip>
  <Chip md>Chip md</Chip>
  <Chip lg>Chip lg</Chip>
  <Chip xl>Chip xl</Chip>
</Row>

Chip with Icon

Chips can contain icons along with text.

With Icon Approved Failed

ChipwithIcon.tsx

<Row flexWrap>
  <Chip primary>
    <Heart className="size-4" />
     With Icon
  </Chip>
  <Chip success>
    <CheckSquare className="size-4" />
     Approved
  </Chip>
  <Chip danger>
    <X className="size-4" />
     Failed
  </Chip>
</Row>