Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Content

Badge

Badge is a small label laid over artwork: a duration, a view count, or New.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

Badge 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

Badge 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 small label over artwork (a duration, a view count, New) and, on a surface, a state such as rendering or one that waits for you.
Not for

Guidelines

  • Only on artwork. It always sits on badge-bg, so it reads on any picture in either theme.
  • Durations in m:ss, counts short ("1.2M views").
  • variant="new" for a just-released issue or episode. One New badge per card at most.
  • variant="alert" for a state that changed for the worse: a place burning or destroyed, a character dead. It fills with badge-alert-bg; use it for that one state, never for decoration.
  • icon puts a 14 px glyph before the label. Use it when the state has a glyph (a trait, a warning); leave it off for durations and counts.
  • On a surface, not over a picture: variant="neutral" for a state (rendering, setup not finished), attention for one that waits for you, outline for where something comes from (Ep 1, Short). dot puts a dot before a state that is live.
BadgeExample.jsxReact
import { Badge } from '@anicanon/sakuga/ui';

export default function BadgeExample() {
  return (
    <>
      <img
        src="/art/eba-s1e1.webp"
        alt=""
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          objectFit: 'cover',
        }}
      />
      <Badge>11:36</Badge>
      <Badge>1.2M views</Badge>
      <Badge variant="new">New</Badge>
      <Badge variant="alert" icon="trait-fierce">
        Burning
      </Badge>
      <Badge icon="warning">Ransacked</Badge>
    </>
  );
}

PropsBadgeProps

childrenrequired
ReactNode
variant
'default' | 'new' | 'alert' | 'neutral' | 'attention' | 'outline'
dot
boolean
A dot before a state that is live.
icon
IconName
className
string

An IconName is any of the names Icon lists.

BadgeExample.swiftiOS · coming soon
BadgeExample.ktAndroid · coming soon

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

badge-bgBadge: duration and count labels laid over artwork.
bg-scrim-strongscrim-a78rgba(7,7,10,0.78)
bg-scrim-strongscrim-a78rgba(7,7,10,0.78)
badge-fgBadge: label glyphs.
text-on-medianeutral-0#ffffff
text-on-medianeutral-0#ffffff
badge-new-bgBadge new: the white 'New' flag over artwork.
text-on-medianeutral-0#ffffff
text-on-medianeutral-0#ffffff
badge-new-fgBadge new: its word.
bg-medianeutral-950#07070a
bg-medianeutral-950#07070a
badge-alert-bgBadge: a state that changed for the worse (burning, dead, destroyed).
accentcamellia-600#c2335f
accentcamellia-400#f4779f
badge-alert-fgBadge: text and icon on badge-alert-bg.
on-accentneutral-0#ffffff
on-accentneutral-925#0b0a10

Space and shape

badge-height
its own value
20px
badge-padding-x
inset-sm
8px
badge-radius
radius-xs
4px
badge-icon-gap
gap-xs
4px
badge-icon-padding-left
inset-xs
4px
badge-icon-size
icon-size-xs
14px
badge-outline-inset-ring-width
line-hairline
1px
badge-dot-size
state-dot-size
6px
badge-dot-margin-right
gap-xs
4px
badge-dot-radius
radius-full
9999px
badge-loader-margin-right
gap-xs
4px
badge-forced-edge-width
line-hairline
1px

Type

badge-font
text-micro
700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

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
Not focusable; its text is read in place. The dot and the icon are hidden, and variant changes only its colour. In forced colours every badge keeps an edge, and its dot stays visible.
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.