Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Productions

CutCell

CutCell is the cut number, with its approval: approved (filled check) or waiting (an empty ring). note adds a short line under it, such as the video it is (V3).

@anicanon/sakuga/anicanonkitv1.0Used onWebFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

CutCell is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

CutCell is made for the web, and isn’t part of Sakuga for Android yet.

Use it for
A cut's number with its approval, approved or waiting, and a short note under it such as the video it is (V3).
Not for
CutCellExample.jsxReact
import { CutCell } from '@anicanon/sakuga/anicanonkit';

export default function CutCellExample() {
  return (
    <>
      <CutCell number="2A" state="approved" />
      <CutCell number="2B" state="waiting" />
      <CutCell number="2C" note="V3" />
    </>
  );
}

PropsCutCellProps

numberrequired
string
state
'approved' | 'waiting'
stateLabel
string
note
string
className
string
CutCellExample.swiftiOS · coming soon
CutCellExample.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

cut-numberCutCell: the cut number.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
cut-number-selectedCutCell: the selected cut's number.
text-accentcamellia-700#b42354
text-accentcamellia-400#f4779f
cut-noteCutCell: a short note under the number.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7
cut-state-borderCutCell: waiting for approval.
border-controlshade-a52rgba(11,10,16,0.52)
border-controlwhite-a45rgba(255,255,255,0.45)
cut-state-ok-bgCutCell: approved.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
cut-state-ok-fgCutCell: approved check.
bg-canvasneutral-50#f6f6f8
bg-canvasneutral-950#07070a

Space and shape

cut-gap
gap-md
8px
cut-state-size
icon-size-md
20px
cut-state-radius
radius-full
9999px
cut-state-inset-ring-width
line-strong
2px

Type

cut-b-font
text-title-3
700 20px/26px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
cut-small-font
text-small-strong
600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

cut-state-duration
motion-fast
160ms
cut-state-easing
ease-standard
cubic-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
Not focusable; the cut number and note read as text, and the approval is an image named by stateLabel ("Approved" or "Waiting for you").
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.