Reference generated from the custom elements manifest — 4 properties, 1 slots, 1 events.
PLAYGROUND3 CONTROLS
PREVIEW / al-chip / ALTITUDE
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 PARITYALTITUDE DESIGN SYSTEM
BOTH CHANGEDAltitude Design SystemFIGMA SET · Chip1 PROPERTY DIFFFROM TRACKED PROJECTION
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.
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