Inline Alerts

An inline alert, mostly used for displaying alerts within Modals. Is a condensed version of the Message component.

Edit the code below to see your changes live!

API

InlineAlert

Prop Name
Type
Default
Description
actionsobject[]

Accepts an array of objects with Button props and an additional text prop. Also, only two variants will be available to use: "secondary" and "subtle". See example for usage.

headerstring

Optional header to display in message.

messages *MessageItem

See below for usage.

typesuccess | error | warning | infosuccess

Determines the style of message to display.

onClose() => void

Function that will be called on close events.

Props ending with * are required

InlineAlert[MessageItem]

Prop Name
Type
Default
Description
text *string

Message to be displayed.

linkMessageLinkItem

See below for usage.

Props ending with * are required

Prop Name
Type
Default
Description
externalboolean

Shows an external icons when the external flag is set and target="_blank".

hrefstring

Same as a HTML anchor href attribute.

textstring

Link text to display.

targetstring

Same as a HTML anchor target attribute.

Props ending with * are required

Inherited Props

Expand

Inherited Props

Examples

Types

There are four types of InlineAlerts based on the level of message you want to display.

Edit the code below to see your changes live!

Header

InlineAlert's allow you to pass an optional header prop.

Edit the code below to see your changes live!

onClose

Toggles the visibility of the close button, and provides an on click callback.

Edit the code below to see your changes live!

Actions

InlineAlert's allow you to pass an optional actions prop.

Edit the code below to see your changes live!

Beta