Tastival UI Design

Design system showcase

Feedback

Alerts, progress, tooltips, and status messages.

alert

Inline message from the Figma Make library: title, description, and default or destructive variants.

How to add it

Import the alert parts from @tastival.net/ui and compose alert, alert-title, and alert-description. Later common components can reuse these same elements.

Import 

import {
  AlertComponent,
  AlertTitleComponent,
  AlertDescriptionComponent,
} from '@tastival.net/ui';

@Component({
  imports: [AlertComponent, AlertTitleComponent, AlertDescriptionComponent],
})
export class ExampleComponent {}

Usage 

<alert variant="default" className="max-w-xl">
  <alert-title className="font-semibold">Payment received</alert-title>
  <alert-description className="text-sm">Your invoice was paid.</alert-description>
</alert>
<alert variant="destructive" className="w-full">
  <alert-title className="uppercase">Payment failed</alert-title>
  <alert-description className="leading-relaxed">Check your card details.</alert-description>
</alert>

Variants

Default Your invoice was paid. Destructive Check your card details.

Playground

Preview

Payment receivedYour invoice was paid.