Alert

Alert banner for brief feedback messages without interrupting the user.

Introduction

Alerts give users brief, potentially time-sensitive information in an unobtrusive manner. Use them for inline feedback within a page—success confirmations, warnings about a form field, or informational notices about a section.

When to use

Use Alert for persistent, in-page feedback the user should read. Prefer Snackbar for transient toasts and Badge for compact status labels.

When to use: Place alerts near the content they describe so users encounter the message in context. Alerts should not interrupt the user’s flow—they remain in the layout rather than blocking interaction.

Compared to similar components:

Snackbar — Toast notifications portaled to the viewport. Use Snackbar for transient, global feedback that auto-dismisses (e.g. “Item saved”). Use Alert for persistent, in-context messages tied to a specific area of the page.
Modal — Blocks interaction until dismissed. Alerts are informational only; use a Modal when you need the user to confirm or respond before continuing.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Alert } from "@bridge-ui/vue/Components/Alert";

import { Alert } from "@bridge-ui/react/Components/Alert";

Basic usage

The Alert component wraps its content and stretches to fill its container. Provide a title for the heading and use children (or the default slot in Vue) for the body message.

<script setup lang="ts">
import { Alert } from "@bridge-ui/vue/Components/Alert";
</script>

<template>
  <div class="flex w-full flex-col gap-4">
    <Alert color="primary" title="Heads up" />

    <Alert color="error" title="Something went wrong">
      Please try again in a few minutes.
    </Alert>

    <Alert title="Saved" color="success" variant="outline">
      Your changes were saved successfully.
    </Alert>
  </div>
</template>

import { Alert } from "@bridge-ui/react/Components/Alert";

export default function AlertBasic() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Alert color="primary" title="Heads up" />

      <Alert color="error" title="Something went wrong">
        Please try again in a few minutes.
      </Alert>

      <Alert title="Saved" color="success" variant="outline">
        Your changes were saved successfully.
      </Alert>
    </div>
  );
}

Colors

Use the color prop to convey the semantic meaning of the message. Available colors: primary, secondary, success, info, warning, error, and dark.

<script setup lang="ts">
import { Alert } from "@bridge-ui/vue/Components/Alert";
</script>

<template>
  <div class="flex w-full flex-col gap-4">
    <Alert color="success" title="This is a success alert." />
    <Alert color="info" title="This is a info alert." />
    <Alert color="warning" title="This is a warning alert." />
    <Alert color="error" title="This is a error alert." />
    <Alert color="primary" title="This is a primary alert." />
    <Alert color="secondary" title="This is a secondary alert." />
    <Alert color="dark" title="This is a dark alert." />
  </div>
</template>

import { Alert } from "@bridge-ui/react/Components/Alert";

export default function AlertColors() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Alert color="success" title="This is a success alert." />
      <Alert color="info" title="This is a info alert." />
      <Alert color="warning" title="This is a warning alert." />
      <Alert color="error" title="This is a error alert." />
      <Alert color="primary" title="This is a primary alert." />
      <Alert color="secondary" title="This is a secondary alert." />
      <Alert color="dark" title="This is a dark alert." />
    </div>
  );
}

Variants

The Alert component supports three style variants, set with the variant prop:

flat (default) — subtle background tint
solid — filled background with contrasting text
outline — transparent background with a colored border

<script setup lang="ts">
import { Alert } from "@bridge-ui/vue/Components/Alert";
</script>

<template>
  <div class="flex w-full flex-col gap-4">
    <Alert color="info" variant="flat" title="This is a flat alert." />
    <Alert color="info" variant="solid" title="This is a solid alert." />
    <Alert color="info" variant="outline" title="This is a outline alert." />
  </div>
</template>

import { Alert } from "@bridge-ui/react/Components/Alert";

export default function AlertVariants() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Alert color="info" variant="flat" title="This is a flat alert." />
      <Alert color="info" variant="solid" title="This is a solid alert." />
      <Alert color="info" variant="outline" title="This is a outline alert." />
    </div>
  );
}

Rounded

Use the rounded prop to control border radius. Available values: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, and full (defaults vary by component).

<script setup lang="ts">
import { Alert } from "@bridge-ui/vue/Components/Alert";
</script>

<template>
  <div class="flex w-full flex-col gap-4">
    <Alert rounded="none" title="rounded=none">Border radius example.</Alert>
    <Alert rounded="sm" title="rounded=sm">Border radius example.</Alert>
    <Alert rounded="md" title="rounded=md">Border radius example.</Alert>
    <Alert rounded="2xl" title="rounded=2xl">Border radius example.</Alert>
    <Alert rounded="full" title="rounded=full">Border radius example.</Alert>
  </div>
</template>

import { Alert } from "@bridge-ui/react/Components/Alert";

export default function AlertRounded() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Alert rounded="none" title='rounded="none"'>
        Border radius example.
      </Alert>
      <Alert rounded="sm" title='rounded="sm"'>
        Border radius example.
      </Alert>
      <Alert rounded="md" title='rounded="md"'>
        Border radius example.
      </Alert>
      <Alert rounded="2xl" title='rounded="2xl"'>
        Border radius example.
      </Alert>
      <Alert rounded="full" title='rounded="full"'>
        Border radius example.
      </Alert>
    </div>
  );
}

Actions

Add an action aligned to the right of the title row. In React, use the slots.action prop; in Vue, use the #action slot. This is useful for dismiss buttons, undo links, or other quick responses.

<script setup lang="ts">
import { Alert } from "@bridge-ui/vue/Components/Alert";
import { Button } from "@bridge-ui/vue/Components/Button";
</script>

<template>
  <div class="w-full">
    <Alert color="warning" title="Session expiring soon">
      Your session will expire in 5 minutes.

      <template #action>
        <Button size="sm" variant="flat" color="warning">Extend</Button>
      </template>
    </Alert>
  </div>
</template>

import { Alert } from "@bridge-ui/react/Components/Alert";
import { Button } from "@bridge-ui/react/Components/Button";

export default function AlertAction() {
  return (
    <div className="w-full">
      <Alert
        color="warning"
        title="Session expiring soon"
        slots={{
          action: (
            <Button size="sm" variant="flat" color="warning">
              Extend
            </Button>
          ),
        }}
      >
        Your session will expire in 5 minutes.
      </Alert>
    </div>
  );
}

The footer slot renders below the body with top border spacing. Use it for secondary actions such as Cancel and Confirm buttons.

<script setup lang="ts">
import { Alert } from "@bridge-ui/vue/Components/Alert";
import { Button } from "@bridge-ui/vue/Components/Button";
</script>

<template>
  <div class="w-full">
    <Alert variant="solid" color="secondary" title="Confirm your changes">
      These changes will be applied to your profile immediately.

      <template #footer>
        <div class="mt-2 flex justify-between">
          <Button size="sm" color="secondary">Cancel</Button>

          <Button size="sm" color="secondary">Confirm</Button>
        </div>
      </template>
    </Alert>
  </div>
</template>

import { Alert } from "@bridge-ui/react/Components/Alert";
import { Button } from "@bridge-ui/react/Components/Button";

export default function AlertFooter() {
  return (
    <div className="w-full">
      <Alert
        variant="solid"
        color="secondary"
        title="Confirm your changes"
        slots={{
          footer: (
            <div className="mt-2 flex justify-between">
              <Button size="sm" color="secondary">
                Cancel
              </Button>

              <Button size="sm" color="secondary">
                Confirm
              </Button>
            </div>
          ),
        }}
      >
        These changes will be applied to your profile immediately.
      </Alert>
    </div>
  );
}

Icons

Each color comes with a default icon. Override it with the icon prop (an icon component or semantic name), or pass null to hide the icon entirely.

<script setup lang="ts">
import { Alert } from "@bridge-ui/vue/Components/Alert";
import { PartyPopper } from "@lucide/vue";
</script>

<template>
  <div class="flex w-full flex-col gap-4">
    <Alert color="success" :icon="PartyPopper" title="Custom icon">
      This alert uses a custom icon from Lucide.
    </Alert>

    <Alert color="info" :icon="null" title="No icon">
      Pass <code class="text-sm">:icon="null"</code> to hide the default icon.
    </Alert>
  </div>
</template>

import { Alert } from "@bridge-ui/react/Components/Alert";
import { PartyPopper } from "lucide-react";

export default function AlertIcons() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Alert color="success" icon={PartyPopper} title="Custom icon">
        This alert uses a custom icon from Lucide.
      </Alert>

      <Alert icon={null} color="info" title="No icon">
        Pass <code className="text-sm">icon={null}</code> to hide the default
        icon.
      </Alert>
    </div>
  );
}

Customization

Fine-tune appearance with rounded, shadow, padding, and the classes prop to target individual parts (root, title, body, icon).

<script setup lang="ts">
import { Alert } from "@bridge-ui/vue/Components/Alert";
</script>

<template>
  <div class="w-full">
    <Alert
      rounded="2xl"
      variant="flat"
      color="primary"
      title="Alert message!"
      :classes="{
        title: 'text-2xl font-extrabold italic',
      }"
    >
      Customize rounded corners, variants, and part classes.
    </Alert>
  </div>
</template>

import { Alert } from "@bridge-ui/react/Components/Alert";

export default function AlertCustomization() {
  return (
    <div className="w-full">
      <Alert
        rounded="2xl"
        variant="flat"
        color="primary"
        title="Alert message!"
        classes={{
          title: "text-2xl font-extrabold italic",
        }}
      >
        Customize rounded corners, variants, and part classes.
      </Alert>
    </div>
  );
}

Accessibility

Alert does not set role or aria-live by default—you choose the appropriate level of urgency:

Urgent dynamic messages: pass role="alert" on the root (equivalent to aria-live="assertive" and aria-atomic="true"). Screen readers announce these immediately. Use sparingly for critical errors or time-sensitive warnings.
Non-interrupting updates: pass role="status" and aria-live="polite" for softer confirmations or background status changes.

Additional guidelines:

Alerts should not steal keyboard focus when they appear.
If an alert contains an action (via slots.action or #action), ensure interactive elements remain reachable by keyboard (tabindex="0" or native focusable elements).
Essential alerts should not disappear automatically—timed removal can make content inaccessible to users who need more time.
Dynamically inserted alerts are announced by screen readers; alerts present on initial page load are not.
Do not rely on color alone to convey meaning—include the message in the alert text or title.

Use customProps (React) or custom-props (Vue) to forward attributes to internal parts without affecting the root element.

Anatomy

The Alert component renders a root <div> containing a title row (icon, title, optional action), an optional body, and an optional footer:

<div class="alert-root">
  <!-- optional header slot -->
  <div class="flex items-start justify-between">
    <div class="flex items-start gap-x-3">
      <svg class="alert-icon"><!-- icon --></svg>
      <div class="alert-title">Alert title</div>
    </div>
    <div><!-- action slot --></div>
  </div>
  <div class="alert-body">Message content</div>
  <!-- footer slot -->
</div>

Button, Icon, Snackbar

API

Prop	Type	Default	Description
title	string	—	The alert heading.
color	AlertColor	"primary"	Semantic color of the alert.
variant	AlertVariant	"flat"	Visual style variant.
icon	IconSource \| null	—	Custom icon or null to hide.
padding	AlertPadding	"medium"	Internal padding.
rounded	AlertRounded	"sm"	Border radius.
shadow	AlertShadow	"sm"	Box shadow.
classes	{ root?, title?, body?, icon? }	—	Class overrides per part.
customProps	{ root?, title?, body?, icon? }	—	HTML attributes forwarded to each part (HTMLAttributes).
slots	{ action?, footer?, header?, icon?, title? }	—	React slots. Vue: #action, #footer, #header, #icon, #title.