--- title: "Toast Feedback | GoodBarber's Design System" description: "The Toast Feedback of GoodBarber apps confirms that a favorite was removed and offers an Undo button, at the bottom of the screen, for a few seconds." canonical_url: "https://www.goodbarber.com/uxdesign/toast-feedback/" lang: sv --- # Toast Feedback | GoodBarber's Design System [Design System](https://se.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [https://se.goodbarber.com/uxdesign/](https://se.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.b5a5ae872a5d.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.5c1a2eb6da12.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [Overview](https://se.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Action](/uxdesign/action/) * [Actions Menu](/uxdesign/actions-menu/) * [Address](/uxdesign/address/) * [Author](/uxdesign/author/) * [Content](/uxdesign/content/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Filter Bar](/uxdesign/filter-bar/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Media](/uxdesign/media/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) * [Player](/uxdesign/player/) * [Premium Sticker](/uxdesign/premium-sticker/) * [Sorting Bar](/uxdesign/sorting-bar/) * [Story Pager](/uxdesign/story-pager/) * [Text](/uxdesign/text/) * [Toast Feedback](/uxdesign/toast-feedback/) * [ToolBar](/uxdesign/toolbar/) * [Widget Header](/uxdesign/widget-header/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Toast Feedback UI Elements The Toast Feedback confirms that a favorite was removed, and offers to undo it, at the bottom of the screen. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/toast-feedback.f68da2250978.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/toast-feedback.f68da2250978.mp4) ## Introduction The Toast Feedback is a short message displayed at the bottom of the screen after the user removes a favorite. It confirms the action, and it offers an Undo button to put the favorite back. It stays on screen for a few seconds, over the content, then disappears on its own. ## Anatomy ### The three parts The toast is a dark bar with three parts in a row, a check [icon](/uxdesign/icons/) on the left, the message, which is a [Text](/uxdesign/text/), and the Undo [Button](/uxdesign/button/) on the right. The message and the label of the button follow the language of the app. ![The check icon, the message and the Undo button](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ToastFeedback-Anatomy-Parts.527e47149eb1.png) *The check icon, the message and the Undo button* ### Spacing The spacing is fixed, whatever the device. There are 16px between the edge of the toast and the icon, 12px between the icon and the message, 12px between the message and the button, 16px after the button, and 12px above and below the row. The icon is 24px, the message is written in the system font in 14px, and Undo is a small Button with a 14px label. ![The spacing around the three parts](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ToastFeedback-Anatomy-Spacing.06905745279c.png) *The spacing around the three parts* ## Properties ### Background, shape, shadow and border The toast carries its own [Background](/uxdesign/background/), [Shape](/uxdesign/atom-shape/), [Shadow](/uxdesign/atom-shadow/) and [Border](/uxdesign/atom-border/), which do not follow the ones of the app. By default, it has a dark background with a white message, rounded corners, a level 1 shadow and no border. The Undo button has its own dark grey background, the same rounded corners, and no shadow. ## Layout ### Position The toast appears at the bottom of the screen, over the content, with a margin on each side. On a phone, it sits above the [TabBar](/uxdesign/tabbar/). On a computer, it is centered at the bottom of the window. ![At the bottom of the screen, above the TabBar](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ToastFeedback-Layout-Position.ccb0310b781e.png) *At the bottom of the screen, above the TabBar* ## Behavior ### Appear and disappear The toast disappears on its own after a few seconds. When it appears, the item has already left the list. In a list on one column, the item slides out to the left, and in a grid it fades out. ### Undo A tap on Undo puts the favorite back in the list and closes the toast. When several favorites are removed one after the other, the toast does not stack. It is updated with each removal, and Undo restores the last favorite removed. ![Undo restores the last favorite removed](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ToastFeedback-Behavior-Undo.89f083e16bd7.png) *Undo restores the last favorite removed*