Alert

import {Alert, AlertLink} from '@sentry/scraps/alert'; import {Badge} from '@sentry/scraps/badge'; import {Flex} from '@sentry/scraps/layout';

import {IconAdd, IconDelete, IconEdit, IconMail} from 'sentry/icons'; import * as Storybook from 'sentry/stories';

export const documentation = import('!!type-loader!@sentry/scraps/alert');

To create a basic alert, wrap your message in an <Alert> component and specify the appropriate type.

<Alert variant="info">This is an informational message</Alert>

Props

Types

Alerts come in five different types to convey different levels of importance and meaning: muted, info, warning, success, and error.

<Storybook.Demo> <Alert.Container> <Alert variant="muted">This is a muted alert for neutral information</Alert> <Alert variant="info">This is an info alert for general information</Alert> <Alert variant="warning">This is a warning alert for important notices</Alert> <Alert variant="success">This is a success alert for positive feedback</Alert> <Alert variant="danger">This is an error alert for critical issues</Alert> </Alert.Container> </Storybook.Demo>

<Alert.Container>
  <Alert variant="muted">This is a muted alert for neutral information</Alert>
  <Alert variant="info">This is an info alert for general information</Alert>
  <Alert variant="warning">This is a warning alert for important notices</Alert>
  <Alert variant="success">This is a success alert for positive feedback</Alert>
  <Alert variant="danger">This is an error alert for critical issues</Alert>
</Alert.Container>

System Alerts

System alerts are full-width variants typically used for application-level notifications or banners.

<Storybook.Demo> <Alert variant="warning" system> This is a system-wide alert that spans the full width of its container </Alert> </Storybook.Demo>

<Alert variant="warning" system>
  This is a system-wide alert that spans the full width of its container
</Alert>

Icons

By default, alerts display appropriate icons based on their type. You can hide icons by setting showIcon={false} or provide custom icons.

<Storybook.Demo> <Alert.Container> <Alert variant="info">Default info icon</Alert> <Alert variant="warning" showIcon={false}> No icon </Alert> <Alert variant="success" icon={<IconAdd />}> Custom add icon </Alert> </Alert.Container> </Storybook.Demo>

<Alert.Container>
  <Alert variant="info">Default info icon</Alert>
  <Alert variant="warning" showIcon={false}>
    No icon
  </Alert>
  <Alert variant="success" icon={<IconAdd />}>
    Custom add icon
  </Alert>
</Alert.Container>

Expandable Content

Alerts can contain expandable content to provide additional details without overwhelming the initial view. Use handleExpandChange to add additional logic on expand and on collapse.

<Storybook.Demo> <Alert variant="warning" expand={ <div> <p>This is additional content that was hidden by default.</p> <p> You can include any React elements here, including lists, links, or other components. </p> </div> }

Click to expand this alert for more details

Expanded by Default

You can control the initial expansion state of alerts with the defaultExpanded prop.

<Storybook.Demo> <Alert variant="info" defaultExpanded expand={ <div> <p>This alert starts in an expanded state.</p> <p>Users can still collapse it by clicking the chevron.</p> </div> }

This alert is expanded by default

Trailing Items

Add interactive elements like buttons, links or badges to the right side of alerts using the trailingItems prop. Note that for buttons, the standardized <Alert.Button> component should be used because it handles sizing correctly.

<Storybook.Demo> <Alert.Container> <Alert variant="info" trailingItems={<Badge variant="warning">Action Required</Badge>} > This alert has a trailing badge </Alert> <Alert variant="danger" trailingItems={ <Flex gap="sm"> <Alert.Button variant="danger" icon={<IconDelete />}> Delete </Alert.Button> <Alert.Button variant="transparent" icon={<IconEdit />}> Edit </Alert.Button> </Flex> } > This alert has multiple trailing actions </Alert> <Alert variant="warning" expand={ <div> <p>This alert starts in an expanded state.</p> <p>Users can still collapse it by clicking the chevron.</p> </div> } trailingItems={ <Flex gap="sm"> <Badge variant="warning">Action Required</Badge> <Alert.Button variant="transparent" icon={<IconEdit />}> Edit </Alert.Button> </Flex> } > This alert has multiple trailing items and can be expanded. </Alert> </Alert.Container> </Storybook.Demo>

<Alert.Container>
  <Alert
    variant="info"
    trailingItems={<Alert.Button variant="primary">Take Action</Alert.Button>}
  >
    This alert has a trailing badge
  </Alert>
  <Alert
    variant="danger"
    trailingItems={
      <Flex gap="sm">
        <Alert.Button variant="danger" icon={<IconDelete />}>
          Delete
        </Alert.Button>
        <Alert.Button variant="secondary" icon={<IconEdit />}>
          Edit
        </Alert.Button>
      </Flex>
    }
  >
    This alert has multiple trailing actions
  </Alert>
</Alert.Container>

Container

Use Alert.Container to properly manage spacing between multiple alerts.

<Storybook.Demo> <Alert.Container> <Alert variant="info">First alert in a container</Alert> <Alert variant="warning">Second alert in a container</Alert> <Alert variant="success">Third alert in a container</Alert> </Alert.Container> </Storybook.Demo>

<Alert.Container>
  <Alert variant="info">First alert in a container</Alert>
  <Alert variant="warning">Second alert in a container</Alert>
  <Alert variant="success">Third alert in a container</Alert>
</Alert.Container>

Alert Links

The AlertLink component creates a clickable alert that can navigate to internal pages, external URLs, or triggers custom actions.

AlertLink supports three types of navigation: internal routing, external URLs, and custom click handlers.

Internal

Use the to prop for internal navigation within the application.

<Storybook.Demo> <AlertLink variant="info" to="/settings"> Go to Settings </AlertLink> </Storybook.Demo>

<AlertLink variant="info" to="/settings">
  Go to Settings
</AlertLink>

External

Use the href prop for external URLs. The openInNewTab prop controls whether the link opens in a new tab.

<Storybook.Demo> <AlertLink variant="info" href="https://docs.sentry.io" openInNewTab> Read the Documentation </AlertLink> </Storybook.Demo>

<AlertLink variant="info" href="https://docs.sentry.io" openInNewTab>
  Read the Documentation
</AlertLink>

Custom Handlers

Use the onClick prop for custom actions that don't involve navigation.

<Storybook.Demo> <AlertLink variant="info" onClick={() => alert('Custom action triggered!')}> Trigger Custom Action </AlertLink> </Storybook.Demo>

<AlertLink variant="info" onClick={() => alert('Custom action triggered!')}>
  Trigger Custom Action
</AlertLink>

Trailing Items

By default, AlertLink includes a right-pointing chevron icon. You can customize this with the trailingItems prop.

<Storybook.Demo> <AlertLink.Container> <AlertLink variant="info" to="/settings"> Default trailing chevron </AlertLink> <AlertLink variant="info" to="/settings" trailingItems={<IconMail />}> Custom trailing icon </AlertLink> <AlertLink variant="info" to="/settings" trailingItems={null}> No trailing items </AlertLink> </AlertLink.Container> </Storybook.Demo>

<AlertLink to="/settings">Default trailing chevron</AlertLink>
<AlertLink to="/settings" trailingItems={<IconMail />}>
  Custom trailing icon
</AlertLink>
<AlertLink to="/settings" trailingItems={null}>
  No trailing items
</AlertLink>

Accessibility

To meet WCAG 2.2 AA compliance, <Alert> automatically meets the WCAG 1.4.3, WCAG 2.1.1, and WCAG 2.4.7 success criteria.

Developers should take care to ensure that their implementations additionally follow the WAI-ARIA Alert Pattern and consider using appropriate ARIA attributes for dynamic content updates.