Jump to a component
AniCanonKit · AniCanon™
FragmentBalance
The Fragments balance in its places: a pill in top bars, a block in the sidebar, a held line while a generation is running, inline: the mark and an amount inside a sentence ("~520 is held when you start"), and card: the balance as a wallet card. Built only from core components and tokens; it lives in AniCanonKit, not the core.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Coming soon
FragmentBalance 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
FragmentBalance 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
- The Fragments balance in its places: a pill in a top bar, a block in the sidebar, a hold while a generation runs, an amount inside a sentence ("~520 is held when you start"), and the wallet card that leads the Fragments page on desktop and phone.
- Not for
- The bare mark or a medallion with no amountFragmentSoul
- The price on the action that spends itSpendButton
- The price on a choice cardSpendTiles
Guidelines
card is the vault at wallet size, in a bank card's proportions (1.586:1, the ISO ID-1 card, with its small corner), for the Fragments screen on phone and desktop. It is also the balance at stake on the app-consent page. The balance is its headline, title (the plan) sits in the corner, held and text run along the foot, and image rests in the far corner behind nothing but the card. It keeps its dark vault in both themes, like a card in a wallet. Use it once per screen, at the top. Say the promise on it: "available · Fragments never expire" goes in caption.
import { FragmentBalance } from '@anicanon/sakuga/anicanonkit';
export default function FragmentBalanceExample() {
return (
<>
<FragmentBalance amount="9,427" />
<FragmentBalance variant="block" amount="9,427" />
<FragmentBalance
variant="held"
amount="20"
text="Charged when you approve it."
/>
<FragmentBalance
variant="card"
amount="9,427"
title="Creator"
held="520"
text="for 2 jobs in progress"
/>
</>
);
}PropsFragmentBalanceProps
amountrequiredstringvariant'pill' | 'block' | 'held' | 'inline' | 'card'captionstringtitlestringtextstringheldstringimagestringhrefstringonClickMouseEventHandlerEach 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
fragments-vault-bgFragments balance card: the soul-vault surface, dark in both themes.spirit-vault#15112aspirit-vault#15112afragments-rimFragments balance card: violet rim and the dot-screentone watermark.spirit-500#8b6cf0spirit-500#8b6cf0fragments-eyebrowFragments balance card: the pink FRAGMENTS eyebrow. The Dark accent in both themes, because the vault is dark in both.camellia-400#f4779fcamellia-400#f4779ffragments-amountFragments balance card: the balance figure.text-on-medianeutral-0#fffffftext-on-medianeutral-0#fffffffragments-captionFragments balance card: secondary lines.text-on-media-mutedneutral-400#a3a3a7text-on-media-mutedneutral-400#a3a3a7Space and shape
fragments-pill-gapgap-smfragments-pill-heightfragments-pill-padding-xinset-smfragments-pill-radiusradius-fullfragments-pill-inset-ring-widthline-hairlinefragments-block-gapgap-lgfragments-block-paddinginset-mdfragments-block-radiusradius-mdfragments-block-inset-ring-widthline-hairlinefragments-held-gapgap-lgfragments-held-padding-yinset-mdfragments-held-padding-xinset-lgfragments-held-radiusradius-mdfragments-block-mark-sizefragments-held-mark-sizeicon-size-mdfragments-pill-mark-sizeicon-size-smfragments-big-mark-sizefragments-foot-mark-sizeicon-size-xsfragments-inline-mark-sizeicon-size-xsfragments-inline-vertical-alignfragments-inline-gapgap-2xsfragments-block-active-scalescale-press-lgfragments-card-gapgap-2xsfragments-card-aspect-ratiofragments-card-paddinginset-lgfragments-card-radiusradius-mdfragments-card-inset-ring-widthline-hairlinefragments-card-art-rightfragments-card-art-bottomfragments-card-art-heightfragments-plan-insetinset-lgfragments-big-gapgap-mdfragments-big-margin-topgap-lgfragments-foot-gapgap-smfragments-foot-padding-topinset-lgType
fragments-font-familyfont-sansfragments-pill-fonttext-microfragments-caption-font-weightweight-mediumfragments-eyebrow-fonttext-eyebrowfragments-eyebrow-letter-spacingtracking-capsfragments-amount-fonttext-title-3fragments-held-b-font-weighttext-label-weightfragments-held-b-font-sizetext-label-sizefragments-held-span-font-sizetext-caption-sizefragments-inline-font-weightweight-strongfragments-inline-caption-font-weightweight-mediumfragments-plan-fonttext-microfragments-big-fonttext-title-1fragments-big-letter-spacingfragments-card-caption-fonttext-captionfragments-foot-fonttext-captionfragments-foot-b-font-weightweight-boldMotion
fragments-block-durationmotion-fastfragments-block-easingease-standardfragments-block-active-durationmotion-instantChecked 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
- The
variantdecides: block is a link named "Fragments balance: 1,240" (a button runningonClickwithouthref), card a group of that name, and pill, card and inline read their amount as "1,240 fragments"; held is said once through the page's live region when it appears ("120 held"), then reads as its text. The mark is hidden in every variant. - 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.