Alert

Alert communicates contextual information with optional icons, partner logos, descriptions, action buttons, size variants, and status colors.

Code

import { Alert, Button } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Alert
      buttons={
        <>
          <Button size={false}>Keep</Button>

          <Button color="danger" size={false}>
            Delete
          </Button>
        </>
      }
      description="Review the sync error before releasing this order."
      iconName="bell"
      title="Order needs attention"
    />
  );
}

Variants

Code

import { Alert } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:flex-col tw:gap-8">
      <Alert
        description="New account activity is available."
        iconName="sign"
        title="Account update"
      />

      <Alert
        description="Order sync failed. Retry before fulfillment."
        iconName="attention"
        title="Order sync failed"
        variant="error"
      />

      <Alert
        description="Order confirmation was sent to the grower."
        iconName="status-completed"
        title="Order confirmed"
        variant="success"
      />

      <Alert
        description="Inventory changed after the last save."
        iconName="attention-outlined"
        title="Inventory updated"
        variant="neutral"
      />
    </div>
  );
}

Without Description

Code

import { Alert, Button } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Alert
      buttons={
        <>
          <Button size={false}>Keep</Button>

          <Button color="danger" size={false}>
            Delete
          </Button>
        </>
      }
      iconName="bell"
      title="Order needs attention"
    />
  );
}

Partner Logo

Code

import { Alert, Button } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:flex-col tw:gap-8">
      <Alert
        buttons={<Button size={false}>View Leads</Button>}
        partnerLogo={
          <img
            src="https://placehold.co/40x40"
            style={{ width: 40, height: 40 }}
          />
        }
        title="You have a new lead from Syngenta"
      />

      <Alert
        buttons={<Button size={false}>View Leads</Button>}
        partnerLogo={
          <img
            src="https://placehold.co/40x40"
            style={{ width: 40, height: 40 }}
          />
        }
        size="large"
        title="You have a new lead from Syngenta"
      />
    </div>
  );
}

Minimal

Code

import { Alert } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return <Alert title="Order needs attention" />;
}

API

Alert

Props

buttons

buttons?: React.ReactNode

className

className?: string

description

description?: React.ReactNode

iconName

iconName?: string

partnerLogo

partnerLogo?: React.ReactNode

size

size?: "large" | "regular" = "regular"

sx

sx?: StyleProps

title

title: React.ReactNode

variant

variant?: "neutral" | "error" | "success" | "warning" = "warning"