---
title: "Inline Alert — Usage"
canonical: https://sky-ui.cf.sky.com/components/inline-alert/usage
---

# Inline Alert — Usage

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

## Basic Guidelines

The Inline Alert is a versatile UI component designed to display important messages, notifications, and feedback directly within the body of a page's content. Its primary purpose is to provide users with context-specific information in a focused and relevant manner.

Unlike the [Toast](/components/toast/) or [Notification](/components/notification/) components, the Inline Alert is embedded within the page layout, making it ideal for delivering messages that are closely tied to specific content or user actions. It can either persist on the page or be triggered to appear and disappear based on user interaction.

The Inline Alert is not intended to replace existing Toast or Notification components, but rather to complement them by serving a different use case.

Inline Alerts must always be displayed within the content area of the page—hence the name. Ideally, they should be positioned adjacent to the element or section they relate to, ensuring the message is seen in the appropriate context.

## Behaviour

Inline Alerts can be set to be dismissible via the close icon button. They can also contain hyperlinks within copy, or separate [Text Links](/components/text-link/) as built into the component.

## Variants Usage

Inline Alerts must not stack, instead combine the messages into one Inline Alert.

There are three status types for Inline Alert; Information, Success and Warning. Each of these have their own optional icon. You can chose to turn off the icon if it not required, however you cannot change the icon.

## Content Guidance

In Figma, the close icon button is set to float above the content. This means that, depending on the content, the text of the headline might overlap with the button. This is not an issue in React. In Figma, we ask you to add in a manual line break to prevent this from happening.

## Alignment

The Alert must align with the grid system or be placed within a container.

In a 12-column grid layout, the Inline Alert should align with the content around it or it can sit within a container.

## Notes on Accessibility

The Inline Alert is fairly standard in terms of accessibility. It will read the content and Text Links in vertical order, then the dismiss button (if visible) will be announced as "Dismiss".