Outlined Toasts
toast#notification
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Toast component
About Outlined Toasts
A grid of eight outlined toast notifications — each a light-tinted card with a 1.5px coloured outline, a 24px line icon, a short message, and a smoothly filling progress bar. One toast spins a loader; one carries an inline link. Fully token-driven and design-system agnostic.
Features
- Eight semantic variants: success, failure, warning, info, syncing, offline, scheduled, action — each with a Tabler line icon and a coloured outline
- Light tinted card fills paired with a matching 1.5px coloured outline per variant
- A smoothly filling progress bar animated via
transform: scaleX()at the foot of each toast - A continuously spinning loader icon on the syncing variant via
transform: rotate() - An inline accessible link on the action variant
- Click a toast to replay its progress bar animation
- Responsive grid that flows from a single column to two columns on wider viewports
- Dark/light theme toggle — a sliding sun/moon pill with a primary-tinted thumb, fixed top-right, persisted to localStorage with a prefers-color-scheme default
Accessibility
- Live region
aria-live="polite"role="status"aria-atomic="true"on the toast grid- Decorative icons
aria-hidden="true"on every icon span- Inline link
- Real
<a>with descriptivearia-label="Undo deleting the file" - Theme toggle
role="switch"witharia-checkedtoggled by JS, focusable viatabindex- Focus indicators
:focus-visiblewith--ringoutline on interactive elements- Keyboard activation
- Theme toggle responds to Enter and Space
- Reduced motion
prefers-reduced-motion: reducedisables all animations- Viewport
100dvhfor mobile-safe viewport height
Customise it with AI
Open Outlined Toasts in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the toast is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.
Explore Other Components
View all
Badge Action Toast
VanillaReact
A stack of notification toasts — each a card with a tinted circular badge, a message, and an inline action button. Four scenarios (message, friend request, file shared, comment) enter at once, auto-dismiss, and respawn when the stack empties. Token-driven and design-system agnostic.
#toast#notification#badge
Bottom Progress Toast
VanillaReact
A minimal toast with a thin bottom progress underline in four semantic variants — success, info, warning, and error — each pairing a deep tinted card with a bright accent.
#toast#snackbar#notification
Toast
VanillaReact
A token-driven toast notification system that renders a staggered set of stacked, auto-dismissing toasts in a fixed corner region across success, error, info, and warning variants — each with a semantic icon chip, inline action, and an auto-dismiss progress indicator that pauses on hover — plus.
#toast#notification#snackbar
Soft Badge Toasts
VanillaReact
A soft, tinted toast notification stack. Each toast wears a pale tinted fill, a matching border, a square icon badge, a title/message pair, and a countdown progress track. Four variants — success, error, warning, info — auto-dismiss with hover and focus pause, plus a replay trigger.
#toast#notification#badge
Toast with Action
VanillaReact
Four telegraph dispatch-slip toasts with mono routing stubs, clear status messages, contextual View and Open actions, and dismiss controls. Irreversible events do not expose misleading Undo actions.
#toast#notification
Dark Variants
ReactVanilla
Four filled dark toast cards — success, failure, warning, info — each a semantic dark-tinted slab carrying a bright accent glyph, accent label, and a smoothly filling accent progress bar, rendered from a small data array and fully token-driven and design-system agnostic.
#toast#snackbar#notification
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
