Jump to a component
Core · Feedback
Toast
A short confirmation that something finished, rising into a corner. One line of title and one of detail, optional action, always dismissable. Never for errors that need a decision.
Live, from @anicanon/sakuga 2.0.0
Sakuga for iOS and Android is coming
iOS
Coming soon
Toast 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
Toast 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
- A short confirmation that something finished, with an optional action.
Guidelines
Motion: it rises in on motion-base with ease-enter and leaves on motion-fast with ease-exit.
- Slide it sideways to dismiss it: it follows the pointer and fades; past
toast-swipe-dismiss(35%) of its width it leaves andonDismissruns, short of that it returns.
import { useState } from 'react';
import { Button, Toast } from '@anicanon/sakuga/ui';
export default function ToastExample() {
const [open, setOpen] = useState(true);
return (
<>
<Button variant="secondary" size="sm" onClick={() => setOpen(true)}>
Save the look
</Button>
<Toast
open={open}
onDismiss={() => setOpen(false)}
title="Plaid overshirt joined his looks"
text="20 fragments charged. The portrait is on us."
/>
</>
);
}PropsToastProps
titlerequiredstringtextstringiconIconNameimagestringmediaReactNodeopenbooleanonDismiss() => voidopen, called after the exit has played.childrenReactNodestyleCSSPropertiesclassNamestringAn 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
toast-bgToast: surface.bg-surfaceneutral-0#ffffffbg-surfaceneutral-900#111117toast-borderToast: edge.border-dividershade-a12rgba(11,10,16,0.12)border-dividerwhite-a12rgba(255,255,255,0.12)toast-iconToast: leading icon.accentcamellia-600#c2335faccentcamellia-400#f4779fSpace and shape
toast-gapgap-lgtoast-swipe-dismisstoast-widthtoast-padding-yinset-mdtoast-padding-xinset-lgtoast-radiusradius-lgtoast-inset-ring-widthline-hairlinetoast-img-sizetoast-img-radiusradius-fulltoast-icon-sizeicon-size-mdtoast-forced-edge-widthline-hairlineType
toast-font-familyfont-sanstoast-body-b-fonttext-labeltoast-body-span-fonttext-smallMotion
toast-swipe-durationmotion-basetoast-swipe-easingease-standardtoast-swipe-out-durationmotion-fasttoast-swipe-out-easingease-exittoast-rise-in-animationmotion-risetoast-leaving-out-animationChecked 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
- Its title and text are said through the page's live region when it appears, and read in place with the icon and picture hidden; Tab reaches any actions in it and the "Dismiss" button, which runs
onDismiss; dismissed with focus inside it, focus goes to the next toast, else back to where it came from. Sliding it away is for the pointer; the Dismiss button does the same. - 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.