FRȘah Design System

Feedback & toasts

Transient messages use sonner via @/components/Shadcn/sonner. The toaster is mounted in pages/_app.js. Inline alerts and field errors stay on the page for persistent context.

import { toast } from 'sonner';

toast.success('Member enrollment approved.');
toast.error('Could not load club members.');

Toasts

Transient notifications triggered after user actions or API responses.

Success

import { toast } from 'sonner';

toast.success('Member enrollment approved.');

Error

toast.error('Could not load club members.');

Info

toast.info('Report draft saved locally.');

Warning

toast.warning('License expires in 7 days.');

const id = toast.loading('Submitting enrollment...');
// toast.dismiss(id) when done

Promise

toast.promise(saveClubProfile(), {
  loading: 'Saving club profile...',
  success: 'Club profile updated.',
  error: 'Could not save changes.',
});

Inline alerts

Persistent banners for page-level notices, validation, and attention states.

Could not load club registry data.

Error panel

<div className="flex items-start gap-4 rounded-lg border border-destructive/40 bg-destructive/15 p-4 text-destructive">
  <CircleX />
  <p>Could not load club registry data.</p>
</div>

Attention

One report is waiting for validation before the quarterly deadline.

Warning panel

<div className="rounded-lg border border-warning/40 bg-warning/15 p-4">
  <p className="text-xs font-semibold uppercase text-warning-foreground">Attention</p>
  <p className="mt-2 text-sm text-warning-foreground">One report is waiting for validation.</p>
</div>

Enrollment for Spring Open 2026 closes on 30.04.2026.

Info panel

<div className="rounded-lg border border-info/40 bg-info/15 p-4">
  <p className="text-sm text-info-foreground">Enrollment closes on 30.04.2026.</p>
</div>

Payment confirmed for Spring Open 2026.

Success panel

<div className="rounded-lg border border-success/40 bg-success/15 p-4">
  <p className="text-sm text-success-foreground">Payment confirmed for Spring Open 2026.</p>
</div>

Field error

<Field data-invalid="true">
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" aria-invalid />
  <FieldError>Enter a valid email address.</FieldError>
</Field>

Shadcn Alert

Compact contextual alerts composed with the shadcn Alert component.

Report in review

Your quarterly report is being validated by the federation.

Default

<Alert>
  <Info />
  <AlertTitle>Report in review</AlertTitle>
  <AlertDescription>Your quarterly report is being validated.</AlertDescription>
</Alert>

Upload failed

The document could not be processed. Check the file format and try again.

Destructive

<Alert variant="destructive">
  <CircleX />
  <AlertTitle>Upload failed</AlertTitle>
  <AlertDescription>The document could not be processed.</AlertDescription>
</Alert>