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 { CentralIcon } from "@smartacteam/ambient-web/icon";

export function AlertDemo() {
  return (
    <div className="flex w-full flex-col gap-8">
      <Alert.Root>
        <Alert.Title>
          <CentralIcon
            name="IconCircleInfo"
            fill="outlined"
            radius="2"
            stroke="1.5"
          />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Action>
          <Button variant="default" size="sm">
            Dismiss
          </Button>
          <Button variant="primary" size="sm">
            Ok
          </Button>
        </Alert.Action>
      </Alert.Root>
      <Alert.Root>
        <Alert.Close />
        <Alert.Title>
          <CentralIcon
            name="IconCircleInfo"
            fill="outlined"
            radius="2"
            stroke="1.5"
          />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Description>
          Describe what can be done about it here.
        </Alert.Description>
        <Alert.Action>
          <Button variant="default">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 { CentralIcon } from "@smartacteam/ambient-web/icon";

export function AlertWithIcon() {
  return (
    <Alert.Root>
      <Alert.Title>
        <CentralIcon
          name="IconCircleInfo"
          fill="outlined"
          radius="2"
          stroke="1.5"
        />
        <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 { CentralIcon } from "@smartacteam/ambient-web/icon";

export function AlertWithIconAndButtons() {
  return (
    <Alert.Root>
      <Alert.Close />
      <Alert.Title>
        <CentralIcon
          name="IconCircleInfo"
          fill="outlined"
          radius="2"
          stroke="1.5"
        />
        <span>Heads up!</span>
      </Alert.Title>
      <Alert.Description>
        Describe what can be done about it here.
      </Alert.Description>
      <Alert.Action>
        <Button variant="default">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 { CentralIcon } from "@smartacteam/ambient-web/icon";

export function AlertInfo() {
  return (
    <div className="flex w-full flex-col gap-8">
      <Alert.Root variant="info">
        <Alert.Title>
          <CentralIcon
            name="IconCircleInfo"
            fill="outlined"
            radius="2"
            stroke="1.5"
          />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Action>
          <Button variant="default" size="sm">
            Dismiss
          </Button>
          <Button variant="primary" size="sm">
            Ok
          </Button>
        </Alert.Action>
      </Alert.Root>
      <Alert.Root variant="info">
        <Alert.Close />
        <Alert.Title>
          <CentralIcon
            name="IconCircleInfo"
            fill="outlined"
            radius="2"
            stroke="1.5"
          />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Description>
          Describe what can be done about it here.
        </Alert.Description>
        <Alert.Action>
          <Button variant="default">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 { CentralIcon } from "@smartacteam/ambient-web/icon";

export function AlertWarning() {
  return (
    <div className="flex w-full flex-col gap-8">
      <Alert.Root variant="warning">
        <Alert.Title>
          <CentralIcon
            name="IconExclamationCircle"
            fill="outlined"
            radius="2"
            stroke="1.5"
          />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Action>
          <Button variant="default" size="sm">
            Dismiss
          </Button>
          <Button variant="primary" size="sm">
            Ok
          </Button>
        </Alert.Action>
      </Alert.Root>
      <Alert.Root variant="warning">
        <Alert.Close />
        <Alert.Title>
          <CentralIcon
            name="IconExclamationCircle"
            fill="outlined"
            radius="2"
            stroke="1.5"
          />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Description>
          Describe what can be done about it here.
        </Alert.Description>
        <Alert.Action>
          <Button variant="default">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 { CentralIcon } from "@smartacteam/ambient-web/icon";

export function AlertError() {
  return (
    <div className="flex w-full flex-col gap-8">
      <Alert.Root variant="error">
        <Alert.Title>
          <CentralIcon
            name="IconExclamationCircle"
            fill="outlined"
            radius="2"
            stroke="1.5"
          />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Action>
          <Button variant="default" size="sm">
            Dismiss
          </Button>
          <Button variant="primary" size="sm">
            Ok
          </Button>
        </Alert.Action>
      </Alert.Root>
      <Alert.Root variant="error">
        <Alert.Close />
        <Alert.Title>
          <CentralIcon
            name="IconExclamationCircle"
            fill="outlined"
            radius="2"
            stroke="1.5"
          />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Description>
          Describe what can be done about it here.
        </Alert.Description>
        <Alert.Action>
          <Button variant="default">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 { CentralIcon } from "@smartacteam/ambient-web/icon";

export function AlertSuccess() {
  return (
    <div className="flex w-full flex-col gap-8">
      <Alert.Root variant="success">
        <Alert.Title>
          <CentralIcon
            name="IconCircleCheck"
            fill="outlined"
            radius="2"
            stroke="1.5"
          />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Action>
          <Button variant="default" size="sm">
            Dismiss
          </Button>
          <Button variant="primary" size="sm">
            Ok
          </Button>
        </Alert.Action>
      </Alert.Root>
      <Alert.Root variant="success">
        <Alert.Close />
        <Alert.Title>
          <CentralIcon
            name="IconCircleCheck"
            fill="outlined"
            radius="2"
            stroke="1.5"
          />
          <span>Heads up!</span>
        </Alert.Title>
        <Alert.Description>
          Describe what can be done about it here.
        </Alert.Description>
        <Alert.Action>
          <Button variant="default">Dismiss</Button>
          <Button variant="primary">Ok</Button>
        </Alert.Action>
      </Alert.Root>
    </div>
  );
}