Skip Navigation
React Magma

Banner

Banners are typically used for system or application level alerts. They fill the full width of their container and are intended to be used without margins.

Basic Usage

The 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 Banner.

import React from 'react';


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


export function Example() {
  return (
    <>
      <Banner>Default (info) banner</Banner>
      <Banner variant={AlertVariant.success}>Success banner</Banner>
      <Banner variant={AlertVariant.warning}>Warning banner</Banner>
      <Banner variant={AlertVariant.danger}>
        Danger banner. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Vivamus rutrum nisl placerat ullamcorper. Maecenas gravida ut velit
        sagittis lacinia.
      </Banner>
    </>
  );
}

Dismissible

The isDismissible prop is optional, and if provided the Banner 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 {
  Banner,
  AlertVariant,
  Button,
  ButtonColor,
  ButtonSize,
} from 'react-magma-dom';


export function Example() {
  const [showBanner, updateShowBanner] = React.useState<boolean>(true);


  function handleBannerDismiss() {
    updateShowBanner(false);
  }


  function handleShowBannerButtonClick() {
    updateShowBanner(true);
  }


  return (
    <>
      {showBanner && (
        <Banner
          isDismissible
          onDismiss={handleBannerDismiss}
          variant={AlertVariant.success}
        >
          Success! You may now dismiss this banner
        </Banner>
      )}
      {!showBanner && (
        <Button
          onClick={handleShowBannerButtonClick}
          size={ButtonSize.small}
          color={ButtonColor.secondary}
        >
          Show Banner Again
        </Button>
      )}
    </>
  );
}

Additional Content

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

import React from 'react';


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


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


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

Action Button

A single button can be added to a Banner Alert to provide the user with an action to take. The actionButtonText prop is a string that sets the text of the button. The actionButtonOnClick prop takes a function and fires when the action button is clicked. Both props must be present for the button to appear.

import React from 'react';


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


export function Example() {
  function handleActionButtonClick() {
    alert('action button clicked!');
  }


  return (
    <Banner
      actionButtonText="Action"
      actionButtonOnClick={handleActionButtonClick}
    >
      Default banner
    </Banner>
  );
}

Inverse

import React from 'react';


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


export function Example() {
  function handleActionButtonClick() {
    alert('action button clicked!');
  }
  return (
    <Container isInverse style={{ padding: '12px' }}>
      <Banner
        actionButtonText="Action"
        actionButtonOnClick={handleActionButtonClick}
        isInverse
      >
        Default (info) banner
      </Banner>
      <Banner
        variant={AlertVariant.success}
        actionButtonText="Action"
        actionButtonOnClick={handleActionButtonClick}
        isInverse
      >
        Success banner
      </Banner>
      <Banner
        variant={AlertVariant.warning}
        actionButtonText="Action"
        actionButtonOnClick={handleActionButtonClick}
        isInverse
      >
        Warning banner
      </Banner>
      <Banner
        variant={AlertVariant.danger}
        actionButtonText="Action"
        actionButtonOnClick={handleActionButtonClick}
        isInverse
      >
        Danger banner
      </Banner>
    </Container>
  );
}

This component uses forwardRef. The ref is applied to the outer 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.

actionButtonOnClick

Description

Action that fires when the action button is clicked. Must be present for button to appear

Type

function

Default

-

actionButtonText

Description

The text displayed inside of the action button

Type

string

Default

-

additionalContent

Description

Enables additional right aligned children within the Banner.

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