Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · AniCanon™

ActivityRow

ActivityRow is the sidebar's line for work that is running: the AniCanon™ loader, how many jobs are running, the latest one's line, and a chevron that opens ActivityPanel.

@anicanon/sakuga/anicanonkitv1.0Used onWebFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

ActivityRow is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

ActivityRow is made for the web, and isn’t part of Sakuga for Android yet.

Not for
  • One job's stages in orderStages
  • How far one job has come where it is being madeProgress

Guidelines

  • count is how many are running; line says what the latest one is doing ("Tattoo · designing the look").
  • expanded turns the chevron while the panel is open; onClick opens and closes it.
ActivityRowExample.jsxReact
import { ActivityRow } from '@anicanon/sakuga/anicanonkit';

export default function ActivityRowExample() {
  return (
    <ActivityRow
      count={2}
      line="Tattoo · designing the look"
      expanded={false}
    />
  );
}

PropsActivityRowProps

countrequired
number
line
string
expanded
boolean
onClick
MouseEventHandler
ActivityRowExample.swiftiOS · coming soon
ActivityRowExample.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

activity-row-bgKit Activity: sidebar row.
bg-fill-subtleshade-a06rgba(11,10,16,0.06)
bg-fill-subtlewhite-a08rgba(255,255,255,0.08)

Space and shape

activity-row-gap
gap-lg
12px
activity-row-padding-y
inset-sm
8px
activity-row-padding-x
inset-md
12px
activity-row-radius
radius-md
12px
activity-row-active-scale
scale-press-lg
.98
activity-row-expanded-inset-ring-width
line-strong
2px
activity-row-loader-size
icon-size-sm
16px
activity-row-chevron-icon-size
icon-size-sm
16px

Type

activity-row-font-family
font-sans
Funnel Sans
activity-row-words-b-font
text-caption-strong
600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
activity-row-words-small-font
text-small
500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

activity-row-duration
motion-fast
160ms
activity-row-easing
ease-standard
cubic-bezier(0.2, 0, 0, 1)
activity-row-active-duration
motion-instant
100ms
activity-row-chev-duration
motion-fast
160ms
activity-row-chev-easing
ease-standard
cubic-bezier(0.2, 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
A button announced as "Activity: N running", described by its line, and expanded or collapsed from expanded; Enter or Space runs onClick. The loader and the chevron are 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.