Success Toast

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

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

Import & use

import { Notification1 } from "@/components/beste/piece/notification1";

<Notification1
  title="Payment successful"
  description="Your invoice has been sent to billing@beste.co"
  action="View receipt →"
/>

More Notification pieces

View all Notification

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.

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.

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.

Achievement unlockedShipped 10 pull requests this week

+250 XP

Achievement Toast

Celebratory unlock notice with a gradient trophy tile and an XP chip on the right.

Uploading64%

product-hero-final.mp4

Upload Toast

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

AnnouncementBeste v3 is now in open beta

Early access to the new editor, theming, and live previews.

Announcement Banner

Full-width tinted banner with a tag pill, headline, CTA button, and a dismiss control.