Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Productions

Slip

Slip is the correction slip, the only tinted surface on a sheet: the Director's revision note, a check, a review note pinned to a take, a story check. done turns it into an outline. Slot: action (Ask Maki).

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

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

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

Android

Web only

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

Use it for
The correction slip, the only tinted surface on a sheet: the Director's revision note, a check, a review note pinned to a take, a story check.
Not for
  • One line of context inside a pageNotice
  • A proposed change in the words themselvesRevision
  • Something Maki proposes inside the chatMakiCard
  • A confirmation that something finishedToast
SlipExample.jsxReact
import { Slip } from '@anicanon/sakuga/anicanonkit';

export default function SlipExample() {
  return (
    <>
      <Slip label="Check">
        Nobody on screen for 6 seconds.
        <span slot="action">
          <a href="#">Ask Maki</a>
        </span>
      </Slip>
      <Slip label="Why this cut" done>
        Push in on the line that turns the scene.
      </Slip>
    </>
  );
}

PropsSlipProps

label
string
done
boolean
children
ReactNode
The note, and slot="action".
className
string
SlipExample.swiftiOS · coming soon
SlipExample.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

slip-bgSlip: the correction slip, the only tinted surface on a sheet.
accent-subtlecamellia-600-a10rgba(194,51,95,0.1)
accent-subtlecamellia-400-a14rgba(244,119,159,0.14)
slip-fgSlip: text.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
slip-labelSlip: label and action.
text-accentcamellia-700#b42354
text-accentcamellia-400#f4779f
slip-done-borderSlip: a resolved slip's edge.
accent-subtlecamellia-600-a10rgba(194,51,95,0.1)
accent-subtlecamellia-400-a14rgba(244,119,159,0.14)
slip-done-fgSlip: a resolved slip's text.
text-secondaryneutral-800#2e2d36
text-secondaryneutral-200#dcdcde

Space and shape

slip-gap
gap-sm
6px
slip-padding-y
inset-sm
8px
slip-padding-x
inset-md
12px
slip-radius
radius-xs
4px
slip-done-inset-ring-width
line-hairline
1px

Type

slip-font
text-caption
500 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
slip-small-font
text-eyebrow
700 11px/14px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
slip-small-letter-spacing
tracking-caps
.06em
slip-a-font
text-small-strong
600 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 itself; "Done" when done, then the label, body and action read in order, and the action takes focus.
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.