Chip
9.3.0
The Chip component is a compact element that represents an input, attribute, or action.
| Namn | Typ | Beskrivning |
|---|---|---|
ariaLabel | string | Aria label attribute for enhanced accessibility. |
customAttribute | { attribute: string; value: string |
number } | Add this for testing. Clickable and requested subcomponents will get suffixed with "-[ComponentName]". |
disabled | boolean | If true, the component is disabled. |
elevation | "undefined" |
"1" |
"2" | Elevation of the chip. Used primarily in dark mode to handle modals and layers. |
id | string | A unique identifier for the component. Used internally for setting WAI-ARIA relationships. |
label * | string | The label text. |
loading | boolean | If true, displays a loading skeleton instead of the chip content. |
onClick | (event: MouseEvent) => void | Callback fired when chip is clicked. |
selected | boolean | If true, shows the chip in a visually selected state. |
startIcon | FC | Leading icon in the chip. |
sx | SxProps | Custom styles applied to the chip. |
badgeColor * | BadgeColor | Color of the badge displayed at the start of the chip. |
hasBadge * | "true" | If true, displays a badge at the start of the chip. |
npm install @sj-ab/component-library.ui.chipChip presenteras som en <div> om den inte är interaktiv, eller som en knapp (<button type="button">) när den är interaktiv och har fått en klicklyssnare med onClick.
Ett klickbart Chip kan markeras som vald med attributet selected. Komponenten får då en check-ikon och markeras automatiskt som vald för hjälpmedel med aria-pressed="true".
Som standard får Chip ett namn av den synliga texten inuti komponenten.
Det är dock möjligt att skriva över den synliga texten med attributet ariaLabel om man vill förtydliga för användare som inte ser. Det kan till exempel gälla ett chip som används som filter i tidtabellen och vi vill förtydliga att ett filter är aktivt.
Importer av Chip
Repos med Chip
Senaste installerade version av Chip
Äldsta installerade version av Chip