--- title: Toast description: Toast reports what just happened without blocking the screen, then leaves on its own. Appetite UI Figma component: two types, five states, tokens. group: Components source: https://www.appetiteui.com/docs/toast dateModified: 2026-10-03 --- # Toast Updated: October 3, 2026. Toast reports what just happened without blocking the screen, then takes itself away. ## Preview Transient feedback that does not block input and takes itself away. On Android this is a Snackbar, on iOS a custom overlay. Specimen: Type Line at State Neutral, then Type Long at State Success. 320 wide, 36 and 96 tall, radius 24, dropShadow/sm. Both types are the same card. Line is one row with a title, a link action and a dismiss. Long adds a description under the title and stacks the two controls on the right. Long is 96 tall, with the description wrapped to two lines. The link reads View, and the surface is bg/raised, the token for floating surfaces: white in light, one step lifted in dark. Toast ships ten variants, Type by State. Source: Figma set Toast, read October 2, 2026. ## Which types does Toast have? Two: Line and Long, two shapes for two amounts of message. The type scale changes with them. Specimen: Type Line then Type Long, both at State Neutral. icon 16 and 20, title 12/16 and 14/20. The two differ in more than height. Line sets the title at 12/16 next to a 16 icon at stroke 1.5. Long lifts it to 14/20 next to a 20 icon at stroke 1.75 and lets the description run to two lines, which takes the card to 96. Both titles are Regular. ## Which states does Toast have? Five: Neutral, Error, Success, Warning and Info, each with its own icon. State changes the icon and its color and nothing else. Specimen: Neutral, Error, Success, Warning and Info, at Type Line. the card stays bg/raised in all five, the icon changes. Every state has its own icon: Neutral message-circle, Info info, Error circle-alert, Success circle-check-big and Warning triangle-alert. The surface never changes: no tint, no colored border, only the icon. Info holds #155DFC in both themes while the link beside it moves to #2B7FFF, so two blues that match in light come apart in dark. The dismiss x is `fg/soft-500`, #8E8E93, a documented product choice that measures 3.26:1 on a white card, above the 3:1 an icon needs. The Success icon is 2.28:1 on white, so the title must name the state and the icon never carries it alone. In dark the View link is #2B7FFF on #242427 at 4.11:1, under the 4.5:1 that WCAG asks of small text. In code, announce a toast in a polite live region, keep it on screen long enough to read, and pause its timer while it has focus or a pointer over it. ## Properties Two variant axes, then three booleans and two text properties. | Property | Type | Default | | --- | --- | --- | | `Type` | Variant: Long \| Line | Long | | `State` | Variant: Neutral \| Error \| Success \| Warning \| Info | Neutral | | `Icon` | Boolean | true | | `Link Button` | Boolean | true | | `Dismiss Icon` | Boolean | true | | `Title Edit` | Text | Title of toast | | `Description` | Text | A short line that confirms what just happened. | | Part | What it is | Size | | --- | --- | --- | | `Button` | A Button instance, Brand Link sm, label View | 71 x 36 | | `Compact Button` | Transparent, holding an x | 32 x 32 | Description is a property on both types even though only Long draws it, so setting it on a Line toast changes nothing. There is no Icon Swap property: the icon belongs to the State, and a different one means swapping the nested icon instance. The Button instance is exposed, so its label is edited from the Toast. There is no position, stacking or duration: where it sits, how long it stays and what a second arrival does are yours. ## Tokens Four for the card, one for the action and five for the icon. Two of the five do not theme. | Token | Light | Dark | Applied to | | --- | --- | --- | --- | | `bg/raised` | #FFFFFF | #242427 | The card, all ten variants | | `border/soft-100` | #E9E9EA | #2F2F31 | 1px inside border | | `text/strong-950` | #0E0E0F | #FFFFFF | Title | | `text/sub-700` | #48484A | #C7C7CC | Description, Long only | | `brand/base` | #155DFC | #2B7FFF | Action label | | `fg/soft-500` | #8E8E93 | #AEAEB2 | Dismiss x | | `state/faded/base-500` | #8E8E93 | #636366 | Neutral icon | | `state/error/base-500` | #FB2C36 | #FB2C36 | Error icon | | `state/success/base-500` | #22C55E | #16A34A | Success icon | | `state/warning/base-500` | #FF6900 | #F54900 | Warning icon | | `state/information/base-500` | #155DFC | #155DFC | Info icon, one value in both modes | Radius is `dimensions/radius/2xl` at 24 on the card and `dimensions/radius/full` on the link and the dismiss. The shadow is the effect style `dropShadow/sm`. Warning, success and faded step from their 500 to their 600 in dark, which keeps them off a dark card. Error and information do not move, so on the dark card information is the weakest color here, sitting next to a link that moved the other way. ## How does Toast differ on iOS and Material 3? iOS has no toast, so the file has no iOS set for it. Material 3 has the Snackbar, a 344 wide bar with a 4 radius, and Appetite UI Toast is the same idea as a 320 wide card with a 24 radius. | Appetite UI | iOS counterpart | Material 3 counterpart | What differs | | --- | --- | --- | --- | | Toast | None in the file. The set description names a custom overlay. | M3 / Snackbar: Configuration Text only, Text and action, Text and longer action, by Option One line or Two lines, with an optional close affordance. 344 wide, 48, 68 or 112 tall, radius 4. | Appetite UI is 320 wide at radius 24 and has five States with their own icon, which a Snackbar does not. The Appetite UI action is a Brand Link button. | The link button is 36 high and the dismiss is 32, both under the minimum touch target of 44 pt on iOS and 48 dp on Android, which comes from `platform/min-touch-target` in the Platform collection. Give both a larger hit area in code. The Motion table enters a toast on `motion/toast/enter`: 120 ms on a decelerate curve, or a spring with response .30 and damping .90. ## Guidelines - Do: Keep the action optional. Undo, View, Retry: things the user can ignore and lose nothing by, because the toast is going to leave on its own. - Avoid: Never put a required action in a toast. It dismisses itself, so a Confirm that lives only here is a decision the user can miss by looking away. Use it for feedback about something that already happened, not for a question. Keep the title to one line, and reach for Long only when the extra sentence changes what the user would do. Put a required decision in a Modal or an Alert, never here. ## In the screens and the glossary - Glossary: [Toast and snackbar](https://www.appetiteui.com/academy/glossary/toast-snackbar)