Alert

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Alert, AlertTitle, AlertDescription, AlertAction } from "@line/abc-def-react/alert";

<script setup lang="ts">
import { Alert, AlertTitle, AlertDescription, AlertAction } from "@line/abc-def-vue/alert";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { Alert, AlertDescription, AlertTitle } from "@line/abc-def-react/alert";

export function Example() {
  return (
    <Alert>
      <AlertTitle>Build complete</AlertTitle>
      <AlertDescription>Tokens and classes are ready to publish.</AlertDescription>
    </Alert>
  );
}

<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from "@line/abc-def-vue/alert";
</script>

<template>
  <Alert>
    <AlertTitle>Heads up</AlertTitle>
    <AlertDescription>Use alerts for short contextual feedback.</AlertDescription>
  </Alert>
</template>

Component tokens

Composition exports

Usage notes

• Keep alert copy concise.
• Use destructive styling only for high-risk states.
• Related component tokens use the `alert` token group in `@line/abc-def-styles/css`.