#Alert

Draw attention to a message inside the page, such as a tip, a warning or an error, in a bordered box.

#Installation

npx @blotch/dolan add alert

import { UiAlert } from '../components/ui/alert';

Alert imports class-variance-authority (see Installation).

#Usage

import { Component } from '@angular/core';
import { UiAlert } from '../components/ui/alert';

@Component({
  selector: 'app-tip',
  imports: [UiAlert],
  template: `
    <ui-alert
      title="Heads up!"
      description="You can add components to your app using the CLI."
    />
  `,
})
export class Tip {}

• The alert sits in the page flow. It doesn't float over content or block taps. For that, use Toast or Alert Dialog.
• It slides up and fades in when it first renders.

#Destructive

<ui-alert
  variant="destructive"
  title="Error"
  description="Your session has expired. Please log in again."
/>

The destructive variant tints the background and colors the border and text red.

#Custom content

Put elements inside to add them below the title and description. Wrap text in <text>, and import LYNX_ELEMENTS in your component.

<ui-alert title="Update available">
  <text class="mt-2 text-sm text-muted-foreground">
    A new version of the app is ready. Restart to apply it.
  </text>
</ui-alert>

#API

#UiAlert

No outputs.

The file also exports alertVariants, the class-variance-authority function that returns the box's classes for a variant, and the AlertVariant type.

#Related

• Toast: a brief message that floats over the app
• Alert Dialog: ask the user to confirm
• Theming: change the colors the variants use