Skip to content
Pinky UI

Notification Card

Icon, title, description, an optional close button and actions, in four semantic states.

  • cards
  • card
  • structural
  • notification
  • alert
  • status

Changes saved

Your profile is up to date.

Quick usage

usage
import { NotificationCard } from "@pinky-ui/components";

<NotificationCard
  variant="success"
  title="Changes saved"
  description="Your profile is up to date."
  onDismiss={() => setVisible(false)}
/>

Presets

Info

Default state.

Error

Heavier border, distinct icon — never colour alone.

variant={"error"}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/components

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
variant"info" | "success" | "warning" | "error""info"Four semantic states within the family's three-hue palette — see the component's own doc comment for how they stay distinguishable.
iconReactNode—Overrides the variant's default icon.
titleReactNode—Required.
descriptionReactNode—Optional.
onDismiss() => void—Renders a close button when given.
actionsReactNode—Optional region below the description.
radius"md" | "lg" | "xl" | "2xl""xl"Corner radius from the shape scale.
paddedbooleantrueInner content padding.
shadow"neutral" | "pink""neutral"Shadow token pair.

Accessibility

  • role="alert" for warning/error, role="status" for info/success, so assistive tech announces the right urgency.
  • Semantic meaning is never colour-only: each variant has its own icon shape, and warning/error — the pair sharing the pink accent — are further told apart by border weight.

Reduced motion

No motion of its own; the dismiss button's hover is a colour/opacity change only.

When to use

  • Inline feedback after an action, form-level errors, status banners

When not to use

  • A transient toast that should disappear on its own — this component has no auto-dismiss timer