Chip
Tiny piece of additional information.
For radio/checkbox selecting capabilities, take a look at RadioChipGroup and CheckboxChipGroup components.
Showcase
ayy
that small?
Source
<Chip outline>ayy</Chip>
<Chip small>that small?</Chip>Properties #
Style Properties
Name | Default | Type | Description |
|---|---|---|---|
small | false | boolean | Makes the chip smaller. |
outline | false | boolean | Adds a border to the chip instead of the background. |
noPadding | false | boolean | Clears the internal padding. Useful if you want to handle spacing yourself. |
Class Properties
All <Chip> components use the .chip class.
Falsy values passed to classes will be disregarded.
Name | Default | Type | Description |
|---|---|---|---|
class | null | string | A class string to add to the component. |
Slots #
Default slot
The content of the chip.
SCSS Variables #
Name | Description | Default |
|---|---|---|
$chip-bg | The background color of a non-outline chip. | rgba(0, 0, 0, .08) |
$chip-fg | The text color of a chip. | #656565 |
$chip-radius | The curvature radius of a chip. | 1.5625em |
$font | The font of the chip text. | 'Ubuntu' |
$main | The border color of outline chips. | #4300B0 |
$bold-font-weight | The bold font weight of the chips. | 500 |