Alert

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download alert -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Alert } from "@/components/ui/alert";
import { AlertTitle } from "@/components/ui/alert";
import { AlertDescription } from "@/components/ui/alert";

const args = {
  "variant": "default",
  "icon": "Info",
} satisfies Partial<
  InstanceType<typeof Alert> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?:
      | "default"
      | "destructive"
      | "info"
      | "success"
      | "warning"
      | "brand";
  };
</script>

<template>
  <Alert v-bind="args">
    <AlertTitle>Action needed</AlertTitle>
    <AlertDescription>
      Your password will expire in 3 days. Please update it to maintain access.
    </AlertDescription>
  </Alert>
</template>

Examples

Default

<script setup lang="ts">
import { Alert } from "@/components/ui/alert";
import { AlertTitle } from "@/components/ui/alert";
import { AlertDescription } from "@/components/ui/alert";

const args = {
  "variant": "default",
  "icon": "Info",
} satisfies Partial<
  InstanceType<typeof Alert> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?:
      | "default"
      | "destructive"
      | "info"
      | "success"
      | "warning"
      | "brand";
  };
</script>

<template>
  <Alert v-bind="args">
    <AlertTitle>Action needed</AlertTitle>
    <AlertDescription>
      Your password will expire in 3 days. Please update it to maintain access.
    </AlertDescription>
  </Alert>
</template>

Destructive

<script setup lang="ts">
import { Alert } from "@/components/ui/alert";
import { AlertTitle } from "@/components/ui/alert";
import { AlertDescription } from "@/components/ui/alert";

const args = {
  "variant": "destructive",
  "icon": "Info",
} satisfies Partial<
  InstanceType<typeof Alert> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?:
      | "default"
      | "destructive"
      | "info"
      | "success"
      | "warning"
      | "brand";
  };
</script>

<template>
  <Alert v-bind="args">
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>
      There was an error processing your request. Please try again later.
    </AlertDescription>
  </Alert>
</template>

Info

<script setup lang="ts">
import { Alert } from "@/components/ui/alert";
import { AlertTitle } from "@/components/ui/alert";
import { AlertDescription } from "@/components/ui/alert";

const args = {
  "variant": "info",
  "icon": "Info",
} satisfies Partial<
  InstanceType<typeof Alert> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?:
      | "default"
      | "destructive"
      | "info"
      | "success"
      | "warning"
      | "brand";
  };
</script>

<template>
  <Alert v-bind="args">
    <AlertTitle>Information</AlertTitle>
    <AlertDescription>
      Your profile has been updated successfully.
    </AlertDescription>
  </Alert>
</template>

Success

<script setup lang="ts">
import { Alert } from "@/components/ui/alert";
import { AlertTitle } from "@/components/ui/alert";
import { AlertDescription } from "@/components/ui/alert";

const args = {
  "variant": "success",
  "icon": "Info",
} satisfies Partial<
  InstanceType<typeof Alert> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?:
      | "default"
      | "destructive"
      | "info"
      | "success"
      | "warning"
      | "brand";
  };
</script>

<template>
  <Alert v-bind="args">
    <AlertTitle>Success</AlertTitle>
    <AlertDescription>
      Your profile has been updated successfully.
    </AlertDescription>
  </Alert>
</template>

Warning

<script setup lang="ts">
import { Alert } from "@/components/ui/alert";
import { AlertTitle } from "@/components/ui/alert";
import { AlertDescription } from "@/components/ui/alert";

const args = {
  "variant": "warning",
  "icon": "Info",
} satisfies Partial<
  InstanceType<typeof Alert> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?:
      | "default"
      | "destructive"
      | "info"
      | "success"
      | "warning"
      | "brand";
  };
</script>

<template>
  <Alert v-bind="args">
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>
      Your storage is almost full. Consider upgrading your plan.
    </AlertDescription>
  </Alert>
</template>

Brand

<script setup lang="ts">
import { Alert } from "@/components/ui/alert";
import { AlertTitle } from "@/components/ui/alert";
import { AlertDescription } from "@/components/ui/alert";

const args = {
  "variant": "brand",
  "icon": "Info",
} satisfies Partial<
  InstanceType<typeof Alert> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?:
      | "default"
      | "destructive"
      | "info"
      | "success"
      | "warning"
      | "brand";
  };
</script>

<template>
  <Alert v-bind="args">
    <AlertTitle>New Feature</AlertTitle>
    <AlertDescription>
      Check out our latest features to enhance your experience.
    </AlertDescription>
  </Alert>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Alert

AlertAction

AlertDescription

AlertTitle

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.