toast — mica

Example

--toast-position

Heads upManual popovers survive light dismiss; the X dismisses.

SavedYour changes are safe.

Basic usage

<m-toast id="saved" popover="manual" variant="success" role="status">
  <button class="close" popovertarget="saved"
          popovertargetaction="hide" aria-label="Dismiss">&#x2715;</button>
  <b>Saved</b>
  <span>Your changes are safe.</span>
</m-toast>

document.getElementById(&#39;saved&#39;).showPopover()  // from your app code

API

Attributes

Name	Type	Default	Description
`popover="manual"`	native attribute	—	Keeps the toast open through light dismiss and while other popovers open.
`variant`	`success \| warning \| danger`	—	Adds the corresponding status edge.
`duration`	milliseconds	`5000`	Auto-dismiss delay when `toast.js` is loaded. `0` makes the toast sticky.
`role="status"`	ARIA role	—	Requests a polite announcement.

Content/markup contract

Part	Contract	Default	Description
`button.close`	direct child	optional	Dismisses through `popovertargetaction="hide"`; provide an accessible name.
`b`	title	—	Primary toast message.
`span` or `p`	description	optional	Muted supporting text.

Styling/public properties

Property	Value	Default	Description
`--toast-position`	`bottom-right \| bottom-left \| bottom-center \| top-right \| top-left \| top-center`	`bottom-right`	App-level position set once on `:root`; every toast follows it.

:root { --toast-position: top-center }
/* bottom-right (default) | bottom-left | bottom-center
   | top-right | top-left | top-center */

Top positions stack downward and enter from above; centers are viewport-centered.

Native methods

Name	Type	Default	Description
`showPopover()`	method	—	Shows an authored toast from app code.
`hidePopover()`	method	—	Dismisses an authored toast from app code.

`toast.js`

Optional and loaded on this page. Open toasts stack upward; auto-dismiss defaults to 5000ms, is disabled by duration="0", and pauses while hovered. The exported toast() helper creates the same markup, shows it, and removes it after dismissal.

import { toast } from 'mica/toast.js'

toast('Saved', { description: 'Your changes are safe.',
                variant: 'success', duration: 4000 })

Export	Signature	Default	Description
`toast`	`(title, { description, variant, duration })`	optional fields	Spawns and returns an ephemeral `m-toast`. Variant accepts `success`, `warning`, or `danger`.

Without the module, m-toast remains an inert styling wrapper around working native manual-popover behavior.

Accessibility

Use role="status" for polite announcements and give an icon-only dismiss button an accessible name. Sticky toasts remain available until explicitly dismissed.

Browser support

Position overrides use container style queries (Baseline newly-available 2026-05). Without support, --toast-position is ignored and toasts keep the bottom-right default — plainer, not broken.