Alerts are used to communicate a state that affects a system, feature or page.

Usage

Import

import { Alert } from '@passfort/castle'
content_copy
Copy

Example

<Stack>
  <Alert status="success" title="Account created" />
  <Alert status="info" title="Info about something" />
  <Alert status="warning" title="Something could happen" />
  <Alert status="error" title="Something happened" onClose={() => {}} />
</Stack>
<Stack>
  <Alert status="success" title="Account created" />
  <Alert status="info" title="Info about something" />
  <Alert status="warning" title="Something could happen" />
  <Alert status="error" title="Something happened" onClose={() => {}} />
</Stack>
content_copy
Copy
live example

Description & actions

<Alert
  status="success"
  title="Account created"
  description="Your account has been created."
  onClose={() => {}}
  actions={<Link href="http://www.google.com">More details</Link>}
/>
<Alert
  status="success"
  title="Account created"
  description="Your account has been created."
  onClose={() => {}}
  actions={<Link href="http://www.google.com">More details</Link>}
/>
content_copy
Copy
live example

Custom

<Alert status="info" title="Custom icon" icon="campaign" />
<Alert status="info" title="Custom icon" icon="campaign" />
content_copy
Copy
live example