Alert

<Alert message="This is an info alert." tone="info" />

<Alert message="Operation completed successfully." tone="success" />
<Alert message="Here is some useful information." tone="info" />
<Alert message="Please proceed with caution." tone="warning" />
<Alert message="Something went wrong." tone="error" />

<Alert
  message={[
    "Password must be at least 8 characters.",
    "Password must include a number.",
    "Password must include a special character.",
  ]}
  tone="error"
/>

// Navigation link — the consumer owns the element and its style.
// Use Anchor for a link that matches the library look, or any
// <a> / Next.js Link with your own className.
<Alert
  message="A new version is available."
  tone="info"
  action={{
    label: 'Learn more',
    renderItem: ({ children }) => (
      <Anchor href="https://example.com" openInNewTab>
        {children}
      </Anchor>
    ),
  }}
/>

// Action button (open a modal, etc.) — style it however you like.
<Alert
  message="Your profile setup is incomplete."
  tone="warning"
  action={{
    label: 'Open settings',
    renderItem: ({ children }) => (
      <button
        className="text-fg-info underline"
        type="button"
        onClick={() => {}}
      >
        {children}
      </button>
    ),
  }}
/>

const [isVisible, setIsVisible] = useState(true);

// onClose renders an in-frame close (×) button at the row's end.
<Alert
  message="..."
  onClose={() => setIsVisible(false)}
  tone="warning"
/>

// onClose can be combined with action.
<Alert
  action={{
    label: 'Learn more',
    renderItem: ({ children }) => (
      <button className="text-primary-fg underline" type="button" onClick={openHelp}>
        {children}
      </button>
    ),
  }}
  message="..."
  onClose={() => setIsVisible(false)}
  tone="warning"
/>