Theme
Sound
Jump to a component
AniCanonKit · AniCanon™
SpendTiles
OptionTiles whose large cards carry fragments: an option's amount (what a pack or plan gives, the card's headline) and cost (what choosing it charges, under its description), each with the fragment mark. It takes every OptionTiles prop, with amount and cost as strings. The core OptionTiles knows nothing of fragments; its amount and cost are neutral, and this is the part that fills them.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Coming soon
SpendTiles 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
SpendTiles 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
- A choice whose cards carry fragments: the Fragments packs and plans, and the first choice of a flow when each way costs something different.
- Not for
- A choice that costs nothingOptionTiles
- The action that spends themSpendButton
Guidelines
costis what an option charges, never what it gives; a pack's or plan's fragments are itsamount.- Put the money price in
description("$24.99 · never expires") and on the action ("Buy Bloom · $24.99"), never inamount.
import { useState } from 'react';
import { SpendTiles } from '@anicanon/sakuga/anicanonkit';
function Demo() {
const [value, setValue] = useState('bloom');
return (
<SpendTiles
size="lg"
columns={3}
label="Fragments packs"
value={value}
onChange={setValue}
options={[
{
value: 'spark',
label: 'Spark',
amount: '9,990',
description: '$9.99 · never expires',
},
{
value: 'bloom',
label: 'Bloom',
amount: '24,990',
description: '$24.99 · never expires',
},
{
value: 'cascade',
label: 'Cascade',
amount: '99,990',
description: '$99.99 · never expires',
},
]}
/>
);
}
export default function SpendTilesExample() {
return <Demo />;
}PropsSpendTilesProps
optionsrequired(Omit<TileOption, 'amount' | 'cost'> & { /** The fragments it gives, e.g. "24,990": the card's headline. */ amount?: string; /** What choosing it charges, e.g. "~10 a second". */ cost?: string; })[]From OptionTilesProps
valuerequiredstring | string[]classNamestringsize'lg'lg: choice cards with description, footnote and badge.
labelstringidstringmultiplebooleancolumnsnumbericonSizenumbernotestringhelp{ title: string; text: ReactNode; }helpOpenbooleanShows the help's tip open (a board).
ariaLabelstringNames the group when there is no label.
onChange(value: string) => voidTypes
interface TileOption { value: string; label: string; icon?: IconName; description?: string; /** Large tiles: the thing's own art on a stage above its name (a Fragments pack or plan). */ image?: string; /** Large tiles: what it gives, set as the headline, e.g. "24,990"; as a ButtonTrailing it takes a mark before it and words read after it. Fragments: AniCanonKit's SpendTiles. */ amount?: string | ButtonTrailing; /** Large tiles: what choosing it charges, under the description, e.g. "~10 a second"; the same shape as amount. */ cost?: string | ButtonTrailing; /** Shown dimmed and cannot be chosen (a plan not open yet). */ disabled?: boolean; badge?: string; footnote?: string; }
It has no tokens of its own: it draws with OptionTiles’s, listed here.
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
option-tile-bgOptionTiles: idle tile.bg-fill-subtleshade-a06rgba(11,10,16,0.06)bg-fill-subtlewhite-a08rgba(255,255,255,0.08)option-tile-fgOptionTiles: idle icon and name.text-secondaryneutral-800#2e2d36text-secondaryneutral-200#dcdcdeoption-tile-hover-bgOptionTiles: hovered tile.bg-fillshade-a12rgba(11,10,16,0.12)bg-fillwhite-a14rgba(255,255,255,0.14)option-tile-selected-bgOptionTiles: chosen tile wash.accent-subtlecamellia-600-a10rgba(194,51,95,0.1)accent-subtlecamellia-400-a14rgba(244,119,159,0.14)option-tile-selected-borderOptionTiles: chosen tile edge.accentcamellia-600#c2335faccentcamellia-400#f4779foption-tile-selected-fgOptionTiles: chosen tile icon and name.text-primaryneutral-925#0b0a10text-primaryneutral-0#ffffffoption-tile-labelOptionTiles: the field name above the grid.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7option-tile-noteOptionTiles: the line describing the chosen option.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7option-card-bgOptionTiles large: card.bg-surfaceneutral-0#ffffffbg-surfaceneutral-900#111117option-card-borderOptionTiles large: edge.border-dividershade-a12rgba(11,10,16,0.12)border-dividerwhite-a12rgba(255,255,255,0.12)option-card-selected-bgOptionTiles large: chosen card.accent-subtlecamellia-600-a10rgba(194,51,95,0.1)accent-subtlecamellia-400-a14rgba(244,119,159,0.14)option-card-selected-borderOptionTiles large: chosen edge.accentcamellia-600#c2335faccentcamellia-400#f4779foption-card-iconOptionTiles large: icon.accentcamellia-600#c2335faccentcamellia-400#f4779foption-card-textOptionTiles large: description.text-secondaryneutral-800#2e2d36text-secondaryneutral-200#dcdcdeoption-card-footOptionTiles large: footnote.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7Space and shape
option-field-gapgap-md8px
option-field-label-gapgap-sm6px
Aa
option-tiles-gapgap-sm6px
option-tile-gapgap-sm6px
option-tile-min-heightits own value
64px
option-tile-padding-yinset-sm8px
option-tile-padding-xinset-xs4px
option-tile-radiusradius-md12px
option-tile-active-scalescale-press.97
option-tile-active-scale-lgscale-press-lg.98
option-tile-pressed-inset-ring-widthline-strong2px
option-tile-focus-outline-offsetfocus-ring-offset3px
option-tiles-gap-lggap-xl16px
option-tile-gap-lggap-md8px
option-tile-padding-lginset-lg16px
option-tile-radius-lgradius-lg16px
option-tile-inset-ring-width-lgline-hairline1px
option-tile-hover-inset-ring-width-lgline-hairline1px
option-tile-pressed-inset-ring-width-lgline-strong2px
option-tile-foot-padding-top-lginset-xs4px
option-tile-top-icon-sizeicon-size-lg24px
option-tile-amount-icon-sizeicon-size-lg24px
option-tile-cost-icon-sizeicon-size-xs14px
option-tile-icon-sizeicon-size-md20px
option-tile-cost-gapgap-xs4px
option-tiles-glide-radiusradius-md12px
option-tiles-glide-inset-ring-widthline-strong2px
option-tiles-glide-radius-lgradius-lg16px
option-tiles-glide-inset-ring-width-lgline-strong2px
option-tile-disabled-opacity-lgopacity-disabled0.35
option-tiles-tile-top-image-inset-lginset-lg16px
option-tile-art-heightits own value
148px
option-tile-art-margin-bottomgap-md8px
option-tile-art-img-pressed-scale-lgscale-zoom1.04
option-tile-amount-gapgap-md8px
option-tiles-rows-tile-image-column-1-lgits own value
84px
option-tiles-rows-tile-image-column-gap-lggap-xl16px
option-tiles-rows-tile-image-row-gap-lggap-2xs2px
option-tiles-rows-tile-art-sizeits own value
84px
option-tile-forced-edge-widthline-hairline1px
option-tile-forced-selected-widthline-heavy3px
Type
option-field-label-fonttext-micro700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
option-field-label-letter-spacingtracking-caps.06em
option-tile-fonttext-small-strong600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
option-field-note-fonttext-small500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
option-tile-title-font-lgtext-title-4700 17px/22px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
option-tile-words-font-lgtext-body400 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
option-tile-foot-font-lgtext-small500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
option-tile-cost-fonttext-small-strong600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
option-tile-amount-fonttext-title-1700 30px/36px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
option-tile-amount-letter-spacingits own value
calc(-1 * -.01em)
option-tiles-rows-tile-amount-font-sizetext-subtitle-size24px
Aa
option-tiles-rows-tile-amount-line-heighttext-subtitle-line-height32px
Motion
option-tile-durationmotion-fast160ms
option-tile-easingease-standardcubic-bezier(0.2, 0, 0, 1)
option-tile-active-durationmotion-instant100ms
option-tile-art-img-durationmotion-base240ms
option-tile-art-img-easingease-standardcubic-bezier(0.2, 0, 0, 1)
Checked 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
- OptionTiles' own: with one choice the cards are a radio group, one Tab stop that the arrows move through. A screen reader hears each card's name, the amount or cost as "24,990 fragments", the description and the footnote; the mark and art are hidden.
- 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.