Jump to a component
Core · Actions
Chip
Chip filters a feed by kind: All, Episodes, Shorts, Manga, Following.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Coming soon
Chip for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.
Android
Coming soon
Chip for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.
- Use it for
- Narrowing what a feed or a list shows, one kind at a time; with
variant="soft", picking several words from a set, such as traits. - Not for
- Running an actionButton
- Two to four views of the same thingSegmentedControl
- Words the person keeps and removesTagList
- A label on artwork or a state on a surfaceBadge
Guidelines
- Use a row of chips inside
Chip.Group(named bylabel); exactly one is selected. - Chips filter what is shown. They never navigate and never run an action; that is Button.
- 44px tall on every platform so they are easy to hit. A
softchip (multi-select) draws at 32px and is still a 44px target: its hit area reaches above and below it. - A chip sinks on press and its fill changes on
motion-fast. - With sound on, a press plays the press sound (README · Sound).
- On phones pass
scrolltoChip.Group: one row that scrolls sideways instead of wrapping.
Icon and soft
icon adds a leading glyph in the accent. removable is a choice already made that a press takes away (a filter): it draws chosen, onClick removes it, and it is named "Remove" and its words (removeLabel changes the verb). A soft chip with no icon is padded alike on both sides. In a Chip.Group, chips given keys arrive and leave by their motion: one added after the group first draws rises in, and one removed (a removable chip pressed) keeps its place while it fades out. variant="soft" is for multi-select sets such as traits: selected chips take chip-soft-selected-bg with an accent edge instead of the solid fill.
import { useState } from 'react';
import { Chip } from '@anicanon/sakuga/ui';
export default function ChipExample() {
const [value, setValue] = useState('All');
return (
<Chip.Group label="What to show">
{['All', 'Episodes', 'Shorts', 'Manga', 'Following'].map((c) => (
<Chip key={c} selected={value === c} onClick={() => setValue(c)}>
{c}
</Chip>
))}
</Chip.Group>
);
}PropsChipProps
childrenrequiredReactNodeselectedbooleaniconIconNamevariant'soft'removablebooleanremoveLabelstringDefault 'Remove'classNamestringChip.Group
Chip.Group names a row of chips.
labelrequiredstringchildrenrequiredReactNodescrollbooleanclassNamestringAn IconName is any of the names Icon lists.
Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.
Colour
chip-bgChip: idle fill.bg-fill-subtleshade-a06rgba(11,10,16,0.06)bg-fill-subtlewhite-a08rgba(255,255,255,0.08)chip-fgChip: idle name.text-primaryneutral-925#0b0a10text-primaryneutral-0#ffffffchip-active-bgChip: selected fill.action-primaryneutral-925#0b0a10action-primaryneutral-0#ffffffchip-active-fgChip: selected name.text-inverseneutral-0#fffffftext-inverseneutral-925#0b0a10chip-iconChip: leading icon.accentcamellia-600#c2335faccentcamellia-400#f4779fchip-soft-selected-bgChip, soft: selected fill (multi-select).accent-subtlecamellia-600-a10rgba(194,51,95,0.1)accent-subtlecamellia-400-a14rgba(244,119,159,0.14)chip-soft-selected-borderChip, soft: selected edge.accentcamellia-600#c2335faccentcamellia-400#f4779fSpace and shape
chip-heightsize-targetchip-padding-xinset-lgchip-radiusradius-fullchip-active-scalescale-press-smchips-gapgap-mdchip-gapgap-smchip-soft-heightchip-soft-padding-rightinset-mdchip-soft-padding-leftinset-smchip-soft-pressed-inset-ring-widthline-strongchip-soft-icon-sizeicon-size-smchip-icon-sizeicon-size-smchip-forced-edge-widthline-hairlinechip-soft-target-sizesize-targetchip-soft-padding-plaininset-mdType
chip-fonttext-labelchip-soft-font-sizetext-caption-sizechip-soft-line-heighttext-caption-line-heightMotion
chip-durationmotion-fastchip-easingease-standardchip-active-durationmotion-instantchip-arrive-animationchip-leave-animationChecked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.
- Result
- No issues found, in light or in dark.
- By design
- Tab focuses each chip; Enter or Space runs
onClick. A screen reader hears the group named by Chip.Group'slabel, then each chip as a button, "pressed" whenselected(aremovableone is a plain button, "Remove Smith"); the icon is hidden. When a keyed chip leaves the group with focus on it, focus goes to the chip now in its place, else the last one. In forced colours each chip keeps an edge, and a selected one takes Highlight. A soft chip is a 44px target, though it draws at 32px. - Not tested
- The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.