Skip Navigation
React Magma

Alert

Alerts are available for any length of text, and may contain HTML markup. They may also have an optional dismiss button.

Basic Usage

Alerts render where ever they are placed contextually in the DOM. The Toast component is similar but renders with a fixed position and has auto dismiss functionality. See the Toasts documentation for more information.

import React from 'react';


import { Alert } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Alert isDismissible>I'm an Alert</Alert>
      <Alert>
        I'm an Alert with <a href="#">linked text</a>
      </Alert>
    </>
  );
}

Variants

The optional variant prop accepts the following values: info, success, warning and danger, with info being the default value. This prop determines the icon and color scheme used to style the Alert.

import React from 'react';


import { Alert, AlertVariant } from 'react-magma-dom';


export function Example() {
  return (
    <>
      <Alert>Default Alert</Alert>
      <Alert variant={AlertVariant.info}>Info Alert</Alert>
      <Alert variant={AlertVariant.success}>Success Alert</Alert>
      <Alert variant={AlertVariant.warning}>
        Warning Alert with <a href="#">linked text</a>
      </Alert>
      <Alert variant={AlertVariant.danger}>
        Danger Alert
        <br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </Alert>
    </>
  );
}

Dismissible

The isDismissible prop is optional, and if provided the Alert will render a dismiss button. Providing this property only causes the dismiss button to render; it does not control the dismiss behavior itself. If you include the isDismissible prop, you must also include a function in the onDismiss prop to handle the dismiss behavior.

The aria-label, by default is Close this message but can be overridden using the optional closeAriaLabel prop.

import React from 'react';


import { Alert, Button } from 'react-magma-dom';


export function Example() {
  const [showAlert, updateShowAlert] = React.useState<boolean>(false);


  return (
    <>
      {showAlert && (
        <Alert isDismissible onDismiss={() => updateShowAlert(false)}>
          Dismiss Me
          <br />
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </Alert>
      )}
      <Button onClick={() => updateShowAlert(true)}>Show Alert</Button>
    </>
  );
}

Additional Content

Using the additionalContent prop will let you include right aligned children within Alerts.

import React from 'react';


import { Alert, Badge, Button } from 'react-magma-dom';


const AdditionalBadge = <Badge>Badge</Badge>;
const AdditionalButton = <Button>Button</Button>;


export function Example() {
  return (
    <>
      <Alert additionalContent={AdditionalBadge}>
        Alert with additional Badge.
      </Alert>
      <Alert additionalContent={AdditionalButton}>
        Alert with additional Button.
      </Alert>
    </>
  );
}

Inverse

import React from 'react';


import { Alert, AlertVariant, Container } from 'react-magma-dom';


export function Example() {
  return (
    <Container isInverse style={{ padding: '12px 12px 0' }}>
      <Alert variant={AlertVariant.info} isInverse>
        Inverse Info Alert
      </Alert>
      <Alert variant={AlertVariant.success} isInverse>
        Inverse Success Alert
      </Alert>
      <Alert variant={AlertVariant.warning} isInverse>
        Inverse Warning Alert with <a href="#">linked text</a>
      </Alert>
      <Alert variant={AlertVariant.danger} isInverse>
        Inverse Danger Alert
      </Alert>
    </Container>
  );
}

Alert Props

This component uses forwardRef. The ref is applied to the Alert container div element.

All of the global HTML attributes can be provided as props and will be applied to the wrapping div element that gets rendered.

additionalContent

Description

Enables additional right aligned children within the Alert.

Type

React.ReactNode

Default

-

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

closeAriaLabel

Description

The text read by screen readers for the close button

Type

string

Default

"Close this message"

isDismissible

Description

If true, the component will be able to be dismissed and will include a close button

Type

boolean

Default

false

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

onDismiss

Description

Action that fires when the close button is clicked (required when isDismissible is true)

Type

function

Default

-

variant

Description

The variant of the alert, indicating its function in the UI

Type

enum, one of:
AlertVariant.danger
AlertVariant.info
AlertVariant.success
AlertVariant.warning

Default

AlertVariant.info

On this page

Deploys by Netlify