Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Maki

MakiComposer

MakiComposer is where the person writes to Maki: suggested replies as chips above, the field, attach and send.

@anicanon/sakuga/anicanonkitv1.0Used onWeb · iOS · AndroidFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

MakiComposer 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

MakiComposer 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
Where the person writes to Maki: suggested replies as chips above the field, attach and send.
Not for

Guidelines

  • value, onChange, onSend, onAttach and onSuggestion make it work: Enter sends, Shift+Enter starts a new line. label names the field for screen readers ("Message to Maki" by default).
MakiComposerExample.jsxReact
import { MakiComposer } from '@anicanon/sakuga/anicanonkit';

export default function MakiComposerExample() {
  return (
    <MakiComposer
      suggestions={['Fix the last train', 'Why does it matter?']}
      placeholder="Ask Maki about the story…"
    />
  );
}

PropsMakiComposerProps

placeholder
string
suggestions
string[]
hint
string
attach
boolean
label
stringDefault 'Message to Maki'
The field's name for screen readers.
value
string
onChange
(text: string) => void
onSend
(text: string) => void
Enter, or Send: the message. Shift+Enter makes a new line.
onAttach
MouseEventHandler
onSuggestion
(suggestion: string) => void
className
string
MakiComposerExample.swiftiOS · coming soon
MakiComposerExample.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

maki-composer-bgMakiComposer: field.
bg-canvasneutral-50#f6f6f8
bg-canvasneutral-950#07070a
maki-composer-borderMakiComposer: field outline.
border-controlshade-a52rgba(11,10,16,0.52)
border-controlwhite-a45rgba(255,255,255,0.45)
maki-composer-placeholderMakiComposer: placeholder and hint.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7

Space and shape

maki-composer-gap
gap-md
8px
maki-composer-chips-gap
gap-sm
6px
maki-composer-field-gap
gap-sm
6px
maki-composer-field-min-height
its own value
44px
maki-composer-field-padding-y
inset-xs
4px
maki-composer-field-padding-right
inset-xs
4px
maki-composer-field-padding-left
inset-md
12px
maki-composer-field-radius
radius-md
12px
maki-composer-field-inset-ring-width
line-hairline
1px
maki-composer-input-height
its own value
20px
maki-composer-input-max-height
its own value
120px
maki-composer-field-focus-inset-ring-width
line-strong
2px
maki-composer-forced-edge-width
line-hairline
1px
maki-composer-forced-focus-width
line-strong
2px

Type

maki-composer-field-font
text-body
400 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
maki-composer-hint-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
Tab reaches each suggestion (a plain button that runs onSuggestion), the field (a text area named by label, default "Message to Maki", and described by the hint), then "Attach" (onAttach) and "Send". In the field Enter sends through onSend and Shift+Enter starts a new line.
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.