Alert

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

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

Primary

Code

<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

<FlexWrapper direction="column" gap={36}>
  <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"
  />
</FlexWrapper>

Without Description

Code

<Alert
  buttons={
    <>
      <Button size={false}>Keep</Button>

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

Partner Logo

Code

<FlexWrapper direction="column" gap={36}>
  <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"
  />
</FlexWrapper>

Minimal

Code

<Alert title="Order needs attention" />

API

Alert

Name	Type/Description
buttons	ReactNode
className	string | undefined
description	ReactNode
iconName	string | undefined
partnerLogo	ReactNode
size = "regular"	"large" | "regular" | undefined
sx	StyleProps | undefined
title	ReactNode
variant = "warning"	"neutral" | "error" | "success" | "warning" | undefined