Single Toast Card

About this piece

A compact single-line toast with a tinted icon chip, a title and meta line, and a relative timestamp.

Usage

The import and the props worth knowing about, in one place.

import { Notification19 } from "@/components/beste/piece/notification19";

<Notification19
  surface="card"
  bordered={true}
  inverted={false}
  title="New booking confirmed"
  meta="Rowan Blake · 09:00"
  time="now"
  tone="emerald"
/>

More Notification pieces

View all Notification

Access request

Noah Reyes wants the records role

Approval Request Toast

An actionable notification card with an icon tile, a request line, and a pair of approve and decline buttons.

Linearnow

New issue assignedENG-482 · Crash on checkout submit

Push Notification

Mobile-style push toast with app icon tile, timestamp, and a two-line preview.

Uploading64%

product-hero-final.mp4

Upload Toast

Live progress card with spinner, percent, filename, and a cancel × at the end of the row.

Your card was declinedUpdate the payment method on file to retry the charge.

Alert Toast

Tinted alert with error, warning, or info severities. Optional dismiss × on the right.

Deployed42s

fix: resolve cart rounding edge case

a1b2c3d·main

Deployment Toast

CI/CD status card with branch, short commit sha, duration, and a building or failed state.

Activity

Rowan Blake confirmed

Intake · 09:00

Invoice #4821 paid

$1,240 · Card

18m

Renewal due soon

3 members this week

Activity Feed Card

A stacked activity feed where each row carries a tinted icon chip, a title and meta line, and a relative timestamp.