Chip
Compact elements representing input, attributes, or actions, often used for tags, filters, or selections that can be added or removed.
Props
Configurable properties that control the appearance, behavior, and functionality of chip components for selection and filtering interfaces.
Chips
Properties that define the visual state and interactive behavior of chip elements.
style variant
Controls the visual presentation mode and background treatment of the chip component.
- solid
- smooth
- outline
context variant
Controls the visual style and semantic meaning of the chip based on its selection purpose and importance.
- default
- alternate
- primary
- secondary
- neutral
- danger
- success
- warning
- info
- black
- white
size variant
Controls the dimensional scale and proportional relationships of the chip component.
- large
- medium
- small
state variant
Controls the interactive state and visual feedback of the chip based on user interaction.
- idle
- hover
- press
- disabled
has-icon boolean
Controls the visibility of an icon element positioned within the chip content area.
- true
- false
icon-instance instance-swap
- has-icon:
- true
Specifies which icon component to display when has-icon property is enabled.
- Icon Placeholder
has-avatar boolean
Controls the visibility of an avatar element positioned within the chip content area for user representation.
- true
- false
dropdown boolean
Controls the visibility of a dropdown indicator that signals additional selection options or filtering criteria.
- true
- false
dismissible boolean
Controls the visibility of a dismiss action that allows users to remove or deselect the chip element.
- true
- false