Toast Notification

About this piece

Toast Notification

Floating card with an emerald success badge, two content lines, and a dismiss icon.

Usage

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

import { Shapes72 } from "@/components/beste/piece/shapes72";

<Shapes72
  surface="card"
  bordered={true}
  inverted={false}
/>

More Shapes pieces

View all Shapes

Notification Card

Avatar circle, two stacked content lines, and a rose unread dot.

Course Card

Thumbnail above title and meta, with a 60% emerald progress bar and percent label.

Modal Dialog

Card on a dimmed backdrop with a title, two text lines, and confirm-cancel buttons.

Blog Card

Side-by-side thumbnail, category dot, two title lines, and a meta line.

Event Card

Date block on the left with title lines and a location row carrying a status dot.

Icon Feature

Single feature card with a large icon tile beside a title and two supporting lines.