Chip API
API reference docs for the Stash Chip component. Learn about the props, CSS, and other APIs of this exported module.
Import
ts
import Chip from '@leaflink/stash/Chip.vue';Props
| Name | Type | Default | Description |
|---|---|---|---|
| bgColor | StashCommonColor | undefined | The background color of the chip. Needs to be one of our design system colors. |
| colorScheme | StashPrimaryColorGroup | ice | The color for the chip that determines both the text and bg color. Needs to be one of the brand colors in our design system (not a shade). |
| disabled | boolean | false | Determines if the chip is disabled. |
| isRemovable | boolean | false | Determines if a close icon is surfaced. |
| radius | "none" | "standard" | "pill" | standard | The type of border radius to use. |
| shade | "light" | "main" | light | The shade of the provided color to use for the background color. This effects the inferred text color unless a specific text color is provided. Currently only `light` and `main` shades are supported. `dark` may be added in the future. |
| shouldOverrideColors | boolean | false | Determines if background and text color in Chip should be overidden. |
| size | "small" | "medium" | medium | The size of the chip. |
| textColor | StashCommonColor | undefined | The color of the chip text. Needs to be one of our design system colors. |
Slots
| Name | Description |
|---|---|
| default | Chip text |
Events
| Name | Description |
|---|---|
| click | Fires on click of the chip. |
| remove | If `is-removable` is true, fires on click of the close button. |