Chip (chip
)
Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.
🔗 External documentation.
ID | Label | Description | Schema |
---|---|---|---|
text | Text | The chip text | |
icon | Icon |
|
id: chip
label: Chip
description: 'Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. '
homepage: 'https://m2.material.io/components/chips'
variants:
default:
id: default
label: Default
selected:
id: selected
label: Pre-selected
description: "Colored inside a 'choice' chip set."
touch:
id: touch
label: Touch
description: 'Extend the input beyond the visual bounds of the element.'
slots:
text:
id: text
label: Text
description: 'The chip text'
props:
icon:
id: icon
label: Icon
schema:
type: string
library:
dependencies:
- material_icons
id: chip
examples:
preview:
id: preview
label: Preview
renderable:
'@component': chip
text: 'Add to calendar'
icon: event
Default
(
default
)
event
Add to calendar
Pre-selected
(
selected
)
Colored inside a 'choice' chip set.
Touch
(
touch
)
Extend the input beyond the visual bounds of the element.
event
Add to calendar