Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Productions

DialogueLine

DialogueLine is a planned line: speaker, delivery, where it falls in the beat, the line in the spoken language and its translation. The line may carry markup as children instead of line: a Revision inside the words.

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

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

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

Android

Web only

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

Use it for
A planned line: the speaker, the delivery, where it falls in the beat, the line in its spoken language and its translation.
Not for
DialogueLineExample.jsxReact
import { DialogueLine } from '@anicanon/sakuga/anicanonkit';

export default function DialogueLineExample() {
  return (
    <DialogueLine
      speaker="Kiko"
      delivery="quiet, certain"
      at="at 1.2 s"
      line="来なさい、ケン。"
      translation="Come here, Ken."
    />
  );
}

PropsDialogueLineProps

speakerrequired
string
line
string
Or the line as children, when it carries markup.
image
string
delivery
string
at
string
translation
string
children
ReactNode
The line with markup (a Revision inside the words).
className
string
DialogueLineExample.swiftiOS · coming soon
DialogueLineExample.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

dline-speakerDialogueLine: speaker.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
dline-textDialogueLine: the line.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
dline-metaDialogueLine: delivery, offset and translation.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7

Space and shape

dline-gap
gap-md
8px
dline-img-size
its own value
24px
dline-div-gap
gap-2xs
2px

Type

dline-b-font
text-micro
700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
dline-b-small-font-weight
weight-medium
500
dline-q-font
text-body
400 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
dline-div-span-font
text-small
500 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; read as text in order: the speaker, the delivery and where it falls, the line as a quotation, then the translation. The speaker's picture is 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.