Inline Alert - React

View on Figma View on GitHub

import { InlineAlert } from '@sky-uk/ui-core';

The Inline Alert component is a versatile communication component that displays important messages, notifications, and feedback to users within the body of the page content.

<InlineAlert $showIcon>
  <InlineAlert.Heading>Heading</InlineAlert.Heading>
  <InlineAlert.Content>Content 1</InlineAlert.Content>
  <InlineAlert.Content>Content 2</InlineAlert.Content>
  <InlineAlert.Content>Content 3</InlineAlert.Content>
  <InlineAlert.Link href="#">Link 1</InlineAlert.Link>
  <InlineAlert.Link href="#">Link 2</InlineAlert.Link>
  <InlineAlert.Footer>Footer</InlineAlert.Footer>
  <InlineAlert.CloseButton label="dismiss" />
</InlineAlert>

Props

InlineAlert

Prop	Type	Default	Description
$variant	string	`information`	The variant of the `InlineAlert`. `'information'` \| `'success'` \| `'warning'`
$showIcon	boolean	`false`	Shows or hides the icon. If set to `true`, the pre-configured icon will be displayed.

InlineAlert.CloseButton

Prop	Type	Default	Description
onClick	function		The `onClick` handler for the dismiss button. This is called when the dismiss button is clicked.
label	string		Sets the `label` for the dismiss button. This is used for accessibility purposes.

Variants

The InlineAlert component supports three variants, which can be set using the $variant prop:

information (default)
success
warning

These variants change the visual style of the alert to convey different types of messages.

<InlineAlert $variant="success" $showIcon>
  <InlineAlert.Heading>Heading</InlineAlert.Heading>
  <InlineAlert.Content>Content 1</InlineAlert.Content>
  <InlineAlert.Link href="#">Link 1</InlineAlert.Link>
  <InlineAlert.Footer>Footer</InlineAlert.Footer>
  <InlineAlert.CloseButton label="dismiss" />
</InlineAlert>

Callbacks

The InlineAlert component has a optional close button that can be used to dismiss the alert. The onClick prop of the InlineAlert.CloseButton can be used to handle the dismissal action.

function Example () {
  const [showAlert, setShowAlert] = React.useState(true);

  return (
    showAlert && (
      <InlineAlert $showIcon>
        <InlineAlert.Heading>Heading</InlineAlert.Heading>
        <InlineAlert.Content>Content 1</InlineAlert.Content>
        <InlineAlert.Link href="#">Link 1</InlineAlert.Link>
        <InlineAlert.Footer>Footer</InlineAlert.Footer>
        <InlineAlert.CloseButton
          label="dismiss"
          onClick={() => setShowAlert(false)}
        />
      </InlineAlert>
    )
  );
}

System Modifiers

The InlineAlert component also accepts props applied using the following system modifiers:

margin