Chip
In progress
RTL
Chips help filter content, or trigger actions.
Default
Sizes
Variants
Active
Disabled
With icons
Is stroke
Is stroke with icons
With on click
Chip props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id attribute for DOM element |
| testid | string | No | - | Data-testid attribute for DOM element |
| is_active | boolean | No | false | Active state |
| is_stroke | boolean | No | false | Shows stroke on hover/active |
| size | sm | md | No | "md" | Size of chip |
| variant | default | ghost | No | "default" | Visual/Logical variant of chip |
| on_click | event | No | - | Event to be fired on click |
| class | css_class | No | - | Additional Tailwind classes |
| aria_label | string | No | - | Aria label attribute for DOM element |
| disabled | boolean | No | - | Disabled chip |
| default | slot | No | - | Default slot |
| left_icon | slot | No | - | Left icon slot |
| right_icon | slot | No | - | Right icon slot |
| icon_only | slot | No | - | Icon slot without text |