Alert

A callout for displaying important information.

Heads up!

Describe what can be done about it here.

import { Alert } from "@smartacteam/ambient-web/alert";
import { Button } from "@smartacteam/ambient-web/button";
import { IconCircleInfo } from "@smartacteam/ambient-web/icons/icon-circle-info";
export function AlertDemo() {
  return (
    <div className="flex w-full flex-col gap-8">
      <Alert.Root>
        <Alert.Title>
          <IconCircleInfo />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Action>
          <Button variant="text">Dismiss</Button>
          <Button variant="primary">Ok</Button>
        </Alert.Action>
      </Alert.Root>
      <Alert.Root>
        <Alert.Close />
        <Alert.Title>
          <IconCircleInfo />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Description>
          Describe what can be done about it here.
        </Alert.Description>
        <Alert.Action>
          <Button variant="text">Dismiss</Button>
          <Button variant="primary">Ok</Button>
        </Alert.Action>
      </Alert.Root>
    </div>
  );
}

Usage

import { Alert } from "@smartacteam/ambient-web/alert";

<Alert.Root>
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description>
    Describe what can be done about it here.
  </Alert.Description>
</Alert.Root>

Examples

With Icon

Heads up!

Describe what can be done about it here.

import { Alert } from "@smartacteam/ambient-web/alert";
import { IconCircleInfo } from "@smartacteam/ambient-web/icons/icon-circle-info";
export function AlertWithIcon() {
  return (
    <Alert.Root>
      <Alert.Title>
        <IconCircleInfo />
        <span>Heads up!</span>
      </Alert.Title>
      <Alert.Description>
        Describe what can be done about it here.
      </Alert.Description>
    </Alert.Root>
  );
}

With Icon and Action Buttons

Heads up!

Describe what can be done about it here.

import { Alert } from "@smartacteam/ambient-web/alert";
import { Button } from "@smartacteam/ambient-web/button";
import { IconCircleInfo } from "@smartacteam/ambient-web/icons/icon-circle-info";
export function AlertWithIconAndButtons() {
  return (
    <Alert.Root>
      <Alert.Close />
      <Alert.Title>
        <IconCircleInfo />
        <span>Heads up!</span>
      </Alert.Title>
      <Alert.Description>
        Describe what can be done about it here.
      </Alert.Description>
      <Alert.Action>
        <Button variant="text">Dismiss</Button>
        <Button variant="primary">Ok</Button>
      </Alert.Action>
    </Alert.Root>
  );
}

Info Alert

Heads up!

Describe what can be done about it here.

import { Alert } from "@smartacteam/ambient-web/alert";
import { Button } from "@smartacteam/ambient-web/button";
import { IconCircleInfo } from "@smartacteam/ambient-web/icons/icon-circle-info";
export function AlertInfo() {
  return (
    <div className="flex w-full flex-col gap-8">
      <Alert.Root variant="info">
        <Alert.Title>
          <IconCircleInfo />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Action>
          <Button variant="text">Dismiss</Button>
          <Button variant="primary">Ok</Button>
        </Alert.Action>
      </Alert.Root>
      <Alert.Root variant="info">
        <Alert.Close />
        <Alert.Title>
          <IconCircleInfo />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Description>
          Describe what can be done about it here.
        </Alert.Description>
        <Alert.Action>
          <Button variant="text">Dismiss</Button>
          <Button variant="primary">Ok</Button>
        </Alert.Action>
      </Alert.Root>
    </div>
  );
}

Warning Alert

Heads up!

Describe what can be done about it here.

import { Alert } from "@smartacteam/ambient-web/alert";
import { Button } from "@smartacteam/ambient-web/button";
import { IconExclamationCircle } from "@smartacteam/ambient-web/icons/icon-exclamation-circle";
export function AlertWarning() {
  return (
    <div className="flex w-full flex-col gap-8">
      <Alert.Root variant="warning">
        <Alert.Title>
          <IconExclamationCircle />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Action>
          <Button variant="text">Dismiss</Button>
          <Button variant="primary">Ok</Button>
        </Alert.Action>
      </Alert.Root>
      <Alert.Root variant="warning">
        <Alert.Close />
        <Alert.Title>
          <IconExclamationCircle />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Description>
          Describe what can be done about it here.
        </Alert.Description>
        <Alert.Action>
          <Button variant="text">Dismiss</Button>
          <Button variant="primary">Ok</Button>
        </Alert.Action>
      </Alert.Root>
    </div>
  );
}

Error Alert

Heads up!

Describe what can be done about it here.

import { Alert } from "@smartacteam/ambient-web/alert";
import { Button } from "@smartacteam/ambient-web/button";
import { IconExclamationCircle } from "@smartacteam/ambient-web/icons/icon-exclamation-circle";
export function AlertError() {
  return (
    <div className="flex w-full flex-col gap-8">
      <Alert.Root variant="error">
        <Alert.Title>
          <IconExclamationCircle />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Action>
          <Button variant="text">Dismiss</Button>
          <Button variant="primary">Ok</Button>
        </Alert.Action>
      </Alert.Root>
      <Alert.Root variant="error">
        <Alert.Close />
        <Alert.Title>
          <IconExclamationCircle />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Description>
          Describe what can be done about it here.
        </Alert.Description>
        <Alert.Action>
          <Button variant="text">Dismiss</Button>
          <Button variant="primary">Ok</Button>
        </Alert.Action>
      </Alert.Root>
    </div>
  );
}

Success Alert

Heads up!

Describe what can be done about it here.

import { Alert } from "@smartacteam/ambient-web/alert";
import { Button } from "@smartacteam/ambient-web/button";
import { IconCircleCheck } from "@smartacteam/ambient-web/icons/icon-circle-check";
export function AlertSuccess() {
  return (
    <div className="flex w-full flex-col gap-8">
      <Alert.Root variant="success">
        <Alert.Title>
          <IconCircleCheck />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Action>
          <Button variant="text">Dismiss</Button>
          <Button variant="primary">Ok</Button>
        </Alert.Action>
      </Alert.Root>
      <Alert.Root variant="success">
        <Alert.Close />
        <Alert.Title>
          <IconCircleCheck />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Description>
          Describe what can be done about it here.
        </Alert.Description>
        <Alert.Action>
          <Button variant="text">Dismiss</Button>
          <Button variant="primary">Ok</Button>
        </Alert.Action>
      </Alert.Root>
    </div>
  );
}