InfoBanner

The InfoBanner is used to communicate a vibrant message, state change or important contextual information that affects the system, feature, running process or the whole page. It also can contain related optional actions in the form of a link.

Properties

NameTypeDefault
title

string

Sets the title of the banner
description

string

Sets the description of the banner
variant

"info" | "success" | "warning" | "danger"

Sets the appropriate colors for the component
"info"
emphasized

boolean

Adds additional emphasis or highlights critical status
"false"
linkText

string

Sets the text of the link contained in the banner
linkUrl

string

Sets the url where the user will be redirected when clicking on the link

The InfoBanner supports space, layout, position, color, flexbox, grid-layout and background styled-system props.

Examples

Please do not share details about this information.In case of uncertainty please contact Fraud department.

Possible FraudThis passenger has more than 20 linked accounts.

Playground

TitleDescriptionLink

Combinations

variant="info"

linkText="Link"

TitleDescriptionLink

variant="info"

linkText=""

TitleDescription

variant="info"

emphasized

linkText="Link"

TitleDescriptionLink

variant="info"

emphasized

linkText=""

TitleDescription

variant="success"

linkText="Link"

variant="success"

linkText=""

variant="success"

emphasized

linkText="Link"

variant="success"

emphasized

linkText=""

variant="warning"

linkText="Link"

TitleDescriptionLink

variant="warning"

linkText=""

TitleDescription

variant="warning"

emphasized

linkText="Link"

TitleDescriptionLink

variant="warning"

emphasized

linkText=""

TitleDescription

variant="error"

linkText="Link"

variant="error"

linkText=""

variant="error"

emphasized

linkText="Link"

variant="error"

emphasized

linkText=""