Chip API

Import

import { Chip } from "@stratakit/structures";
// OR
import * as Chip from "@stratakit/structures/Chip";

Chip (default)

Base element: <div>

Chip is a UI component used to represent an item, attribute, or action in a compact visual style. It supports two visual variants: solid for primary emphasis and outline for less prominent states.

Example:

<Chip label="Value" />
<Chip label="Value" variant="outline" />

label

Type: ReactNode (required)

The label displayed inside the chip.

onDismiss

Type: (() => void) | undefined (optional)

Default: undefined

Callback invoked when the dismiss (”❌”) button is clicked.

If undefined, the dismiss button will not be rendered.

variant

Type: "outline" | "solid" | undefined (optional)

Default: "solid"

The variant style of the Chip. Use “solid” for primary states and “outline” for less prominent states.

Additional props

• render

Chip.Root

Base element: <div>

Root component of the compositional Chip component.

Example:

<Chip.Root>
  <Chip.Label>Label</Chip.Label>
  <Chip.DismissButton onClick={onClick} />
</Chip.Root>

variant

Type: "outline" | "solid" | undefined (optional)

Default: "solid"

The variant style of the Chip. Use “solid” for primary states and “outline” for less prominent states.

Additional props

• render

Chip.Label

Base element: <span>

Label component that should be used with the compositional Chip component.

Additional props

• render

Chip.DismissButton

Base element: <button>

Dismiss button component that should be used with the compositional Chip component.

label

Type: string | undefined (optional)

Default: "Dismiss"

Label for the dismiss button.

The final accessible name of the dismiss button is a combination of this label and the text content of Chip.Label.

Additional props

• render