Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Maki

AskMaki

AskMaki is Maki's one button: Maki's face and a label. It carries Maki's face, never a sparkle.

@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

AskMaki 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

AskMaki 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
The one button that asks Maki: handed a conflict, a selection or a question at size="sm", or in a view's header as the Maki pill with its count, which opens Maki's panel.
Not for
  • An action that is not about MakiButton
  • A quiet Ask Maki inside a line or a row of textTextLink
  • Maki's column with the conversationMakiPanel

Guidelines

  • Handed something (a conflict, a selection, a question): size="sm", the label says what Maki is asked ("Ask Maki how it could be answered").
  • In a view's header: label="Maki", size="md", shape="pill", with count (how many things Maki wants looked at, left out when there is nothing). It opens Maki's panel; open says the panel is open, and the pill sits on the accent tint.
  • href makes it a link to Maki's page instead of a button.
AskMakiExample.jsxReact
import { AskMaki } from '@anicanon/sakuga/anicanonkit';

const MAKI = '/art/maki-avatar.png';

export default function AskMakiExample() {
  return <AskMaki avatar={MAKI} />;
}

PropsAskMakiProps

avatarrequired
string
label
stringDefault 'Ask Maki'
variant
'secondary' | 'ghost' | 'outline'
size
'sm' | 'md'
shape
'pill'
count
string
How many things Maki wants looked at.
open
boolean
Maki's panel is open beside the view.
href
string
onClick
MouseEventHandler
AskMakiExample.swiftiOS · coming soon
AskMakiExample.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.

Space and shape

ask-maki-img-size
its own value
20px
ask-maki-button-img-size-md
its own value
32px
ask-maki-button-img-margin-left-md
its own value
calc(-1 * 12px)
ask-maki-button-img-radius-md
radius-full
9999px
ask-maki-em-min-width
icon-size-md
20px
ask-maki-em-height
icon-size-md
20px
ask-maki-em-padding-x
inset-xs
4px
ask-maki-em-radius
radius-full
9999px

Type

ask-maki-em-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
A button (a link with href) that Tab reaches; Enter runs onClick, and Space does too on a button. A screen reader hears "Ask Maki" (or label), "Ask Maki, 3 to look at" with count, and expanded or collapsed when open is set; Maki's face 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.