Jump to a component
Core · Feedback
Notice
A single line of context inside a page: something to know (info) or something that needs action (attention), with an optional action on the right. Not for errors that block, use the page state for those.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Coming soon
Notice 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
Notice 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
- One line of context inside a page: something to know, or something that needs action, with an optional action.
- Not for
- Confirming that something finishedToast
- A failure where the content should beEmptyState
- A correction pinned to work on a sheetSlip
Guidelines
Motion: state changes fade with motion-fast; entrances use motion-base and ease-enter.
import { Button, Notice } from '@anicanon/sakuga/ui';
export default function NoticeExample() {
return (
<>
<Notice
tone="attention"
title="Two scenes need a Festival look."
text="Nothing fits yet."
>
<Button variant="primary" size="sm" icon="plus">
Add a look
</Button>
</Notice>
<Notice title="Build changed." text="New looks use it." />
</>
);
}PropsNoticeProps
tone'info' | 'attention'Default 'info'iconIconNamemediaReactNodetitlestringtextstringchildrenReactNodeclassNamestringAn IconName is any of the names Icon lists.
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
notice-info-bgNotice, info: fill.bg-fill-subtleshade-a06rgba(11,10,16,0.06)bg-fill-subtlewhite-a08rgba(255,255,255,0.08)notice-info-iconNotice, info: icon.text-mutedneutral-600#5c5b67text-mutedneutral-400#a3a3a7notice-attention-bgNotice, attention: fill.accent-subtlecamellia-600-a10rgba(194,51,95,0.1)accent-subtlecamellia-400-a14rgba(244,119,159,0.14)notice-attention-iconNotice, attention: icon.text-accentcamellia-700#b42354text-accentcamellia-400#f4779fnotice-titleNotice: bold lead.text-primaryneutral-925#0b0a10text-primaryneutral-0#ffffffnotice-textNotice: body text.text-secondaryneutral-800#2e2d36text-secondaryneutral-200#dcdcdeSpace and shape
notice-gapgap-lgnotice-padding-yinset-mdnotice-padding-xinset-lgnotice-radiusradius-mdnotice-action-gapgap-mdnotice-icon-sizeicon-size-mdType
notice-fonttext-captionnotice-body-b-font-weightweight-boldMotion
notice-rise-in-animationmotion-riseChecked 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 in place, the icon is hidden, and any action in it takes focus. With
tone"attention" it says its title and text once, through the page’s one live region, when it appears: a status role on words there from the start is rarely read. A loader passed asmediakeeps its name. - 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.