Flo.w

# Chip

<flow-chip>
Stable

Chip components can be used to display user selections such as filter conditions.

The chip component displays an optional 'clear' button. The component emits a flowClear event when the clear button is clicked. Intercept this event to remove the chip and clear the option that the chip represents.

# Examples

# Colors

# Sizes

# Clearable Chips

Chips emit the flowClear event when their clear button is clicked.

# Properties

Property Description Type Default
clearable Set to `true` to make the tag clearable. boolean false
color The color of the chip. Colors are taken from the application palette. "danger" | "gray" | "primary" | "secondary" | "success" | "warning" 'primary'
pill Set to `true` to draw a pill-style tag with rounded edges. boolean false
size The chip's size. "large" | "medium" | "small" 'medium'

# Events

Event Description Type
flowClear

Emitted when the clear button is activated.

 any

# Slots

Slot Description
(default) The chip's content.

# CSS Custom Properties

Name Description
--background-color Color of the chip background (default: primary alpha 0.1)
--border-color Color of the chip border (default: primary alpha 0.3)
--color Color of the chip (default: primary)

# CSS Parts

Name Description
clear-button The clear button.
label The chip's label.

← Context →