---
title: "Inline Alert — React"
canonical: https://sky-ui.cf.sky.com/components/inline-alert/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Inline Alert — React

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

```js
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.

---

```tsx
<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`. <br />`'information'` \| `'success'` \| `'warning'` |
| $showIcon | boolean | `false` | Shows or hides the icon. <br />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. <br />This is called when the dismiss button is clicked. |
| label | string |  | Sets the `label` for the dismiss button. <br />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.

```tsx
<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.

```tsx
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](/core/system/margin/)

---