Approval Request Toast

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

Access request

Noah Reyes wants the records role

New here? Read the installation guide.

Import & use
import { Notification20 } from "@/components/beste/piece/notification20";

<Notification20
  icon={{
    "displayName": "UserPlus"
  }}
  title="Access request"
  meta="Noah Reyes wants the records role"
  primaryLabel="Approve"
  secondaryLabel="Decline"
/>

More Notification pieces

View all Notification

New booking confirmed

Rowan Blake · 09:00

now

Single Toast Card

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

Payment successfulYour invoice has been sent to billing@beste.co

Success Toast

Notification with a circled icon, title, description, and an optional action link.

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.

Linear
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.

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.