Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Feedback

EmptyState

EmptyState stands in place of content while there is none: what is happening or what went wrong, in a sentence, then what can be done.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

EmptyState 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

EmptyState 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 place where content would be while there is none: nothing yet, something being made, or something that failed.
Not for
  • One line of context beside content that is thereNotice
  • A job whose share done is knownProgress
  • A frame waiting for its pictureThumb

Guidelines

  • title says it plainly ("Ponytail didn’t finish", "Warming up the booth"); text says what is kept and what happens next.
  • tone="attention" with icon="warning" when something failed; pass a loader in slot="media" while something is being made.
  • Children follow the text: what it cost (a held or returned amount), a quiet "Show details".
  • It never apologises and never blames the creator. Nothing is charged for a failure, and the text says so.
EmptyStateExample.jsxReact
import { Button, EmptyState } from '@anicanon/sakuga/ui';
import { Loader } from '@anicanon/sakuga/anicanonkit';

export default function EmptyStateExample() {
  return (
    <>
      <EmptyState
        tone="attention"
        icon="warning"
        title="Ponytail didn’t finish"
        text="Your name and wording are kept. Adjust them or try again as is."
      >
        <Button variant="ghost" size="sm">
          Show details
        </Button>
      </EmptyState>
      <EmptyState
        title="Warming up the booth"
        text="Recording a few takes of the same line. Usually under a minute."
      >
        <span slot="media">
          <Loader size={32} />
        </span>
      </EmptyState>
    </>
  );
}

PropsEmptyStateProps

title
string
text
string
icon
IconName
tone
'attention'
children
ReactNode
className
string

An IconName is any of the names Icon lists.

EmptyStateExample.swiftiOS · coming soon
EmptyStateExample.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.

Space and shape

empty-icon-glyph-size
its own value
28px
empty-gap
gap-xl
16px
empty-icon-size
its own value
56px
empty-icon-radius
radius-full
9999px
empty-words-max-width
its own value
440px

Type

empty-font-family
font-sans
Funnel Sans
empty-title-font
text-title-2
700 24px/30px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
empty-words-font
text-body-lg
400 15px/24px "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 itself; the title and text read as paragraphs, the icon is hidden, and any actions in it take focus in order. With tone "attention" it says its title and text once, through the page’s one live region, when it appears.
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.