The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Alert

Feedback messages for user actions
<Alert>A simple alert example</Alert>

Props
Link to this heading

<Alert>

import { Alert } from '@strum/react';
name
type
default
Icon
ComponentType<IconProps>
-
color
"accent" | "error" | "success" | "warning"
accent
emphasis
never
false
iconAccessibilityLabel
string
-
size
"medium" | "small" | "large" | "extraLarge" | "extraSmall"
medium

Colors
Link to this heading

<Stack>

  <Alert color="accent">Accent</Alert>

  <Alert color="error">Error</Alert>

  <Alert color="warning">Warning</Alert>

  <Alert color="success">Success</Alert>

</Stack>

Sizes
Link to this heading

<Stack>

  <Alert size="extraSmall">Extra small</Alert>

  <Alert size="small">Small</Alert>

  <Alert size="medium">Medium</Alert>

  <Alert size="large">Large</Alert>

  <Alert size="extraLarge">Extra large</Alert>

</Stack>

Emphasis
Link to this heading

A bit more saturation on the background, and a bright left border to draw attention.

<Stack direction="horizontal">

  <Alert color="accent" emphasis>

    Accent

  </Alert>

  <Alert color="error" emphasis>

    Error

  </Alert>

  <Alert color="warning" emphasis>

    Warning

  </Alert>

  <Alert color="success" emphasis>

    Success

  </Alert>

</Stack>

Icons
Link to this heading

The alert component takes an Icon prop that expects a React.ComponentType. It works perfectly with any icon that ships with Strum, though you can pass a custom React component type if you prefer. You should also pass an iconAccessibilityLabel string to provide meaning for the icon you selected.

<Stack>

  <Alert

    color="accent"

    Icon={Icons.InfoCircledIcon}

    iconAccessibilityLabel="info"

  >

    This alert includes an info icon

  </Alert>

  <Alert

    color="error"

    Icon={Icons.ExclamationTriangleIcon}

    iconAccessibilityLabel="exclamation point"

  >

    This error alert includes an exclamation icon

  </Alert>

  <Alert

    color="warning"

    Icon={Icons.QuestionMarkCircledIcon}

    iconAccessibilityLabel="question mark"

  >

    This warning alert includes a question mark icon

  </Alert>

  <Alert

    color="success"

    Icon={Icons.CheckCircledIcon}

    iconAccessibilityLabel="check mark"

  >

    This success alert includes a check mark icon

  </Alert>

</Stack>

Links
Link to this heading

Links within an alert will take on custom styles.

<Stack>

  <Alert color="accent">

    Check out this <a href="#">accent link</a> that matches the alert style!

  </Alert>

  <Alert color="error">

    Check out this <a href="#">error link</a> that matches the alert style!

  </Alert>

  <Alert color="warning">

    Check out this <a href="#">warning link</a> that matches the alert style!

  </Alert>

  <Alert color="success">

    Check out this <a href="#">success link</a> that matches the alert style!

  </Alert>

</Stack>
Edit on GitHub