Reference generated from the custom elements manifest — 4 properties, 1 slots, 1 events.
PLAYGROUND3 CONTROLS
PREVIEW / al-chip / SOUTHLEFT
Loading preview
Design
variant
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYSOUTHLEFT DESIGN SYSTEM
BOTH CHANGEDSouthleft Design SystemFIGMA SET · Chip
Code and Figma each changed since the last confirmed sync. Neither side should be overwritten blindly.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
4 ATTR · 1 SLOT · 1 EVENT · 0 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
PROPERTYDIFFERENCECODE / FIGMA
variantThe two sides offer a different number of variant values.5 / 6
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEchip--BarePASS
Advanced statesAXE9 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 10 STORIES.
import '@southleft/al-web-components/components/chip';
import { ALChip } from '@southleft/al-react';
API — 4 PROPS4 DOCUMENTED
PROPTYPEDEFAULT
variant'neutral' | 'bare' | 'primary' | 'secondary' | 'tertiary'Variant — an EMPHASIS axis, matching `al-button`. Status is not on this
axis: `al-badge` and `al-alert` carry info/success/warning/danger.
- **default** the resting outlined pill (the `tertiary` treatment)
- **primary** a chip filled with the primary role
- **secondary** a chip filled with the secondary role
- **tertiary** an outlined chip on a transparent ground
- **neutral** a low-emphasis filled chip
- **bare** no fill and no border—
type'squared'Type variant
- **default** A chip with rounded corners
- **squared** A chip with squared corners—
isDismissiblebooleanDismissible property
- **true** Adds an X to hide the chip on click
- **false** Hides the X so the chip can not be hidden—
isDismissedbooleanIs dismissed property
- **true** Hides the chip
- **false** Shows the chip—
SLOTS1
SLOTDESCRIPTION
(default)The chip content
EVENTS1
EVENTDESCRIPTIONTYPE
onChipCloseFired when the chip's remove control is activated. Carries no detail payload; read the chip's own properties from `event.target`.CustomEvent
CSS CUSTOM PROPERTIES8
PROPERTYDESCRIPTIONDEFAULT
--al-chip-backgroundChip surface. Defaults to `--al-theme-color-background-neutral-strong`.—
--al-chip-colorLabel colour. Defaults to `--al-theme-color-content-neutral-weak`.—
--al-chip-borderBorder shorthand. Defaults to `none`.—
--al-chip-border-radiusCorner radius. Defaults to `4px`.—
--al-chip-paddingPadding shorthand. Defaults to `space-xxs space-sm`.—
--al-chip-gapGap between label and icon. Defaults to `space-xs`.—
--al-chip-font-familyLabel family. Defaults to `inherit`.—
--al-chip-cursorDefaults to `pointer`; set `default` for a non-interactive chip.—
PUBLIC METHODS1
METHODDESCRIPTION
handleOnKeydown()Handle on keydown events 1. If the escape key is pressed, then close the chip