Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · AniCanon™

ActivityPanel

ActivityPanel is the panel that opens from ActivityRow: jobs in groups (running with their progress, needing you with an action, earlier).

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

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

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

Android

Web only

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

Use it for
The list of running and finished work, opened from ActivityRow.
Not for
  • A short confirmation that something finishedToast
  • One job's stages in orderStages

Guidelines

  • groups are {title, jobs}; a job has a title, a text, an image or initial, and a progress (a Progress), a time, or an action ({label, primary, onClick}, a small Button).
  • onClose makes it hold focus while shown: focus starts on the first job's action, and Escape and its Close run onClose.
ActivityPanelExample.jsxReact
import { ActivityPanel } from '@anicanon/sakuga/anicanonkit';

export default function ActivityPanelExample() {
  return (
    <ActivityPanel
      groups={[
        {
          title: 'Running · 1',
          jobs: [
            {
              initial: 'T',
              title: 'Tattoo · new character',
              text: 'Designing the look',
              progress: 55,
              time: '0:31',
            },
          ],
        },
        {
          title: 'Needs you',
          jobs: [
            {
              initial: 'S',
              title: 'Smith · new look',
              text: 'Ready for your review',
              action: { label: 'Review', primary: true },
            },
          ],
        },
      ]}
    />
  );
}

PropsActivityPanelProps

groupsrequired
{ title: string; jobs: ActivityJob[]; }[]
onClose
() => void
With it, the panel takes focus while shown; Escape and Close run it.
className
string
style
CSSProperties

Types

interface ActivityJob {
    title: string;
    text?: string;
    image?: string;
    initial?: string;
    progress?: number;
    time?: string;
    action?: {
        label: string;
        primary?: boolean;
        onClick?: MouseEventHandler;
    };
}
ActivityPanelExample.swiftiOS · coming soon
ActivityPanelExample.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-bgKit Activity: panel.
bg-surfaceneutral-0#ffffff
bg-surfaceneutral-900#111117
activity-groupKit Activity: group heading.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7

Space and shape

activity-width
its own value
400px
activity-padding-bottom
inset-md
12px
activity-radius
radius-xl
24px
activity-inset-ring-width
line-hairline
1px
activity-head-padding-top
inset-lg
16px
activity-head-padding-x
inset-lg
16px
activity-head-padding-bottom
inset-sm
8px
activity-group-margin-top
gap-md
8px
activity-group-margin-x
gap-xl
16px
activity-group-margin-bottom
gap-xs
4px
activity-job-gap
gap-lg
12px
activity-job-padding-y
inset-sm
8px
activity-job-padding-x
inset-lg
16px
activity-job-av-size
its own value
40px
activity-job-av-radius
radius-full
9999px
activity-job-bar-margin-top
gap-sm
6px

Type

activity-font-family
font-sans
Funnel Sans
activity-head-b-font
text-title-4
700 17px/22px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
activity-group-font
text-eyebrow
700 11px/14px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
activity-group-letter-spacing
tracking-caps
.06em
activity-job-av-font
text-label-bold
700 14px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
activity-job-words-b-font
text-caption-strong
600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
activity-job-words-span-font
text-small
500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
activity-job-time-font
text-small-strong
600 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

activity-rise-in-animation
motion-rise
sk-rise-in 240ms cubic-bezier(0, 0, 0, 1)
activity-job-duration
motion-fast
160ms
activity-job-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 dialog named "Activity". With onClose, focus moves to the first job's action, Tab stays inside, and Escape or "Close activity" runs onClose and focus goes back. Each job's progress is a progress bar named by its title.
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.