Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Manga

MentionChip

MentionChip shows who or what a panel holds: a cast member (@), a place (#) or a prop, with its picture and a quiet note.

@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

MentionChip 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

MentionChip 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
Who or what a panel or a prompt holds: a cast member (@), a place (#), a reference ($) or a prop, with its picture and a quiet note such as the outfit and the emotion.
Not for
  • A character's face, name and role in a rowCastAvatar
  • A mention inside proseMention
  • Narrowing a feed by kindChip
  • Words kept as removable tagsTagList

Guidelines

  • kind sets the mark: character writes @Bruce, place writes #Bruce's apartment, reference writes $rain-look (a picture the creator added, with what it is for as the note), prop has no mark.
  • tone="media" over art, in the phone's dock.
  • note is what this panel needs of it: the outfit and the emotion for a character ("Winter coat · tired").
  • Pass the sheet's picture as image; a prop with no sheet yet shows no picture, never a stand-in.
MentionChipExample.jsxReact
import { MentionChip } from '@anicanon/sakuga/anicanonkit';

export default function MentionChipExample() {
  return (
    <>
      <MentionChip
        name="Bruce"
        note="Winter coat · tired"
        image="/art/bad-memories-cast-bruce-face.webp"
      />
      <MentionChip
        kind="place"
        name="Bruce’s apartment"
        image="/art/bad-memories-place-balcony.webp"
      />
      <MentionChip kind="prop" name="The phone" />
    </>
  );
}

PropsMentionChipProps

namerequired
string
kind
'character' | 'place' | 'reference' | 'prop'Default 'character'
tone
'media'
image
string
note
string
href
string
className
string
MentionChipExample.swiftiOS · coming soon
MentionChipExample.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

mchip-bgMentionChip: the chip.
bg-fill-subtleshade-a06rgba(11,10,16,0.06)
bg-fill-subtlewhite-a08rgba(255,255,255,0.08)
mchip-textMentionChip: the name.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
mchip-noteMentionChip: outfit, emotion or role.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7

Space and shape

mchip-gap
gap-sm
6px
mchip-height
its own value
32px
mchip-padding-right
inset-md
12px
mchip-padding-left
inset-xs
4px
mchip-radius
radius-full
9999px
mchip-no-img-padding-left
inset-md
12px
mchip-img-size
its own value
24px
mchip-img-radius
radius-xs
4px
mchip-media-height
its own value
32px
mchip-media-padding-left
inset-2xs
2px

Type

mchip-font
text-caption-strong
600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
mchip-small-font-weight
text-caption-weight
500

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
Read as text, its mark first ("@Aiko", "#Harbour") then the note; with href it is a link that Tab reaches and Enter follows, named the same way. The 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.