Toast
A confirmation after an action.
Kit parts
Ticket toast
A toast issued like a numbered ticket from a dispenser. A short slip of thermal paper with a number, a line of words and, if it needs one, an action key slides out of a slot at the edge of the screen. Several fan a little. Tear one off with a swipe or its close key, or leave it and it retracts by itself, on a timer that stops while you are reading it.
Seats open in 11 days. Want one email that morning?
Anatomy
The slot is drawn in two halves with the tickets between them. The paper is the kit’s paper tokens, the same in every finish. The stub is set off by a dashed perforation.
Variants
- One ticket
- With an action key
- Amber · a warning
- Red
- A stack fans
- Lamp off
- Long words wrap
States
- Green
- Amber
- Red
- With a key
Props and options
| Name | Kind | Description |
|---|---|---|
| ticketToast(options) | function | The first call sets the dispenser up. |
| options.text | option | The words: one sentence. Written as text, never as markup. |
| options.tone | option | The lamp on the stub. Green by default. |
| options.action | option | One action key. Pressing it calls onClick(handle) and then tears the ticket off, unless onClick returns false. |
| options.timeout | option | |
| options.into | option | Dispense into a box of your own instead of the bottom right of the screen. The box needs position: relative and overflow: hidden. |
| handle.dismiss() | method | Pulls the ticket back into the slot now. |
| swipe | pointer | Drag it sideways and it follows and leans. Past a third of its width, or fast, it tears off; short of that it settles back. Works with a finger. |
| Escape | keyboard | Tears the ticket off. |
| ticketNumber · ticketTone · ticketTimeout · ticketVerdict · ticketClock · ticketHTML | function | The rules, pure: the number, what a tone means, how long a ticket stays, whether a swipe tears, a clock that can be held, and the markup for a page that renders one on a server. |
Usage notes
Press a key: a ticket comes out of the slot at the foot of the panel. Hover it and the timer stops. Swipe it away, or press its cross.
Accessibility
- Each ticket is a live region of its own. A screen reader gets “Error.” or “Warning.” before the words. The lamp is a second signal.
- The time belongs to the reader. The timer stops while the pointer is over a ticket or focus is inside it, and starts again with whatever was left. A red ticket has no timer.
- Tearing off is never the only way out. The swipe is the quick way.
- Focus is not dropped when a ticket goes. If it was inside, it moves to the close key of the next ticket, or back to where it was before the ticket came.
- The action key is a real button named by its own words. Keep them to the act: “Undo”, “Open runbook”.
- Keys sit on paper, which is light in every finish, so their focus ring and printing use the paper’s ink, not the finish’s.
- With reduced motion tickets appear and leave at once: no sliding, leaning or tearing. The timers still run and everything is still said.
Related parts
Alert
A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened.
Notifications
A key with a counter window in its cap, and a card of messages hung from it. Each unread message has its lamp lit; reading it puts the lamp out and the counter steps down.