Theme
Sound
Jump to a component
AniCanonKit · Story
EntityRow
EntityRow is the one row kind on Story: a picture, the name, its state, and the work that told it as a chip on the right.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Web only
EntityRow is made for the web, and isn’t part of Sakuga for iOS yet.
Android
Web only
EntityRow is made for the web, and isn’t part of Sakuga for Android yet.
- Use it for
- Every row on Story: a character, a bond, a place, an event or a question, with its state and the work that told it.
- Not for
- A row outside Story, such as a take or a settingListRow
- An open question with its planted, raised and answered stepsQuestionRow
- Something found in writing, waiting for the personProposalCard
- The people in a character's life beside their nameCastAvatar
Guidelines
visualpicks the picture: a portrait (avatar), two overlapping portraits for a bond (pair), a place's art (place), an event's shape (event), a question's three-step track (question).- State is
before/after(drawn asStateChange) or any badges inslot="state". fadedfor something that no longer counts at this moment.
import { EntityRow } from '@anicanon/sakuga/anicanonkit';
export default function EntityRowExample() {
return (
<EntityRow
visual={{ kind: 'question', stage: 2 }}
name="Cure, or the next threat?"
after="Escalated"
chip="Ep 1"
/>
);
}PropsEntityRowProps
namerequiredstringvisualVisualbeforestringafterstringafterVariant'new' | 'alert'afterIconIconNamebeforeIconIconNamechipstringfadedbooleanstateReactNodeThe state in place of before/after (as slot="state").
endReactNodeWhat sits at the end (as slot="end").
childrenReactNodeclassNamestringAn IconName is any of the names Icon lists.
Types
Visual is one of 9 names.
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
entity-nameEntityRow: name.text-primaryneutral-925#0b0a10text-primaryneutral-0#ffffffentity-chip-borderEntityRow: the told-by chip outline.border-dividershade-a12rgba(11,10,16,0.12)border-dividerwhite-a12rgba(255,255,255,0.12)entity-chip-fgEntityRow: the told-by chip label.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7entity-visual-bgEntityRow: picture placeholder.bg-fill-subtleshade-a06rgba(11,10,16,0.06)bg-fill-subtlewhite-a08rgba(255,255,255,0.08)entity-visual-fgEntityRow: initials and icons in the picture slot.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7entity-pair-gapEntityRow: the ring between two overlapping portraits.bg-surfaceneutral-0#ffffffbg-surfaceneutral-900#111117Space and shape
entity-gapgap-md8px
entity-min-heightits own value
40px
entity-padding-yinset-xs4px
entity-visual-faded-opacityopacity-muted0.6
entity-chip-faded-inset-ring-widthline-hairline1px
entity-words-gapgap-xs4px
entity-chip-heightits own value
20px
entity-chip-padding-xinset-sm8px
entity-chip-radiusradius-full9999px
entity-chip-inset-ring-widthline-hairline1px
entity-visual-place-radiusradius-xs4px
entity-visual-pair-widthits own value
44px
entity-visual-pair-img-sizeits own value
24px
entity-visual-pair-img-ring-widthline-strong2px
entity-visual-pair-img-margin-leftits own value
calc(-1 * 8px)
entity-visual-slot-widthits own value
44px
entity-visual-maki-heightits own value
32px
entity-visual-question-i-sizeits own value
8px
entity-visual-question-i-radiusradius-xs4px
entity-visual-question-b-widthits own value
4px
entity-visual-question-b-heightline-strong2px
entity-visual-question-b-radiusradius-full9999px
entity-visual-place-icon-sizeicon-size-xs14px
entity-visual-slot-icon-sizeicon-size-sm16px
Type
entity-words-b-fonttext-caption-strong600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
entity-chip-fonttext-small-strong600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
entity-visual-initial-fonttext-micro700 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; the name, "not at this moment" when
faded, its state and the chip read as text in order, then whatever sits at the end. Pictures and initials are hidden, and a faded row dims its picture while its words stay readable. - 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.