Return to Sky UI homepage

Inline Alert - Overview

View on FigmaView on GitHub

Purpose

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.

Anatomy

The Inline Alert component can be broken down into the following elements -

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6

  1. Icon (optional)

    Helps to indicate whether the Inline Alert relates to success, informational or warning content.

  2. Headline (optional)

    An optional headline to describe the subject of the Inline Alert.

  3. Content (#2 & #3 are optional)

    Up to three blocks of text content.

  4. Text Link components (optional)

    A list of up to two Text Links for further directions.

  5. Dismiss Icon Button component (optional)

    Icon Button used to dismiss the Inline Alert.

  6. Footer copy (optional)

    Useful for additional copy, legal content or links to help articles.

Variants & States

  • Breakpoint: Mobile, Desktop
  • Status: Information, Success, Warning
  • Icon: on/off
  • Dismissible: on/off
  • Heading: on/off
  • Content 2: on/off
  • Content 3: on/off
  • Text Link 1: on/off
  • Text Link 2: on/off
  • Legal content: on/off
Everything optional ON (Success)
Heading text
Content 1
Content 2
Content 3
Footer
Everything optional OFF (Warning)
Content 1