Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Maki

ChatMessage

ChatMessage is the person's own message in a chat with Maki, set to the right.

@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

ChatMessage 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

ChatMessage 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 person's own message in a chat with Maki, set to the right.
Not for

Guidelines

  • name is who sent it, said before the message for screen readers ("You" by default).
ChatMessageExample.jsxReact
import { ChatMessage } from '@anicanon/sakuga/anicanonkit';

export default function ChatMessageExample() {
  return <ChatMessage>Fix the last train</ChatMessage>;
}

PropsChatMessageProps

childrenrequired
ReactNode
name
stringDefault 'You'
Who sent it, said before the message.
className
string
ChatMessageExample.swiftiOS · coming soon
ChatMessageExample.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

chat-mine-bgChatMessage: the person's own message.
accent-subtlecamellia-600-a10rgba(194,51,95,0.1)
accent-subtlecamellia-400-a14rgba(244,119,159,0.14)

Space and shape

chat-padding-y
inset-sm
8px
chat-padding-x
inset-md
12px
chat-radius-top-left
radius-md
12px
chat-radius-top-right
radius-md
12px
chat-radius-bottom-right
radius-xs
4px
chat-radius-bottom-left
radius-md
12px

Type

chat-font
text-caption
500 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

chat-mine-rise-in-animation
motion-rise
sk-rise-in 240ms cubic-bezier(0, 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 message reads as plain text after who sent it, "You" (or name), which is said but not shown.
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.