Components
Chip
A compact element for a tag, a filter or a choice.
Chip shows a short label. It can be pressed, deleted or carry an avatar or an icon.
import Chip from '@hone-ui/react/Chip';Examples
Default
Primary
Outlined
Small
A
Ada<Chip label="Default" />
<Chip label="Primary" color="primary" />
<Chip label="Outlined" variant="outlined" color="secondary" />
<Chip label="Small" size="small" />
<Chip label="Ada" avatar={<Avatar>A</Avatar>} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | The text. | |
color | 'default', 'primary', 'secondary', 'error', 'info', 'success', 'warning', any palette key | 'default' | The color. |
variant | 'filled', 'outlined' | 'filled' | A fill or a border. |
size | 'small', 'medium' | 'medium' | The height: 24 or 32 pixels in the Material look. |
avatar, icon | element | Shown before the label. avatar wins. | |
onClick | (event) => void | Makes the chip a button. Gets the real click event. | |
clickable | boolean | Pressable without onClick, or not pressable with it. | |
href | string | Renders a link. | |
onDelete | (event) => void | Shows a delete icon. Backspace and Delete call it too. | |
deleteIcon | element | Replaces the delete icon. | |
disabled | boolean | false | Disables the chip. |
skipFocusWhenDisabled | boolean | false | Takes a disabled chip out of the tab order. |
sx, className, style, ref | Standard. |
Notes
children,componentandslotsare not supported. Uselabelandhref.- The delete icon is not focusable by itself. Focus the chip and press Backspace or Delete.
Accessibility
A clickable chip is a button. A deletable chip that is not clickable is a focusable element
with role="button". Name the delete action when the label alone does not make it clear.