Status tag

Skip to page content

BETA

Interactive example

Neutral

Success

Warning

Error

Web component

React

<ic-status-taglabel="Neutral"status="neutral"></ic-status-tag>
<ic-status-taglabel="Success"status="success"></ic-status-tag>
<ic-status-taglabel="Warning"status="warning"></ic-status-tag>
<ic-status-taglabel="Error"status="danger"></ic-status-tag>

<IcStatusTaglabel="Neutral"status="neutral"/>
<IcStatusTaglabel="Success"status="success"/>
<IcStatusTaglabel="Warning"status="warning"/>
<IcStatusTaglabel="Error"status="danger"/>

Status tag details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property label Attribute label	The content rendered within the status tag. Required type: string
Property announced Attribute announced	If`true` , role='status' is added to the component and it will act as an 'aria-live' region. Screen readers will announce changes to the`label` , but not the initial value. type: boolean	false
Property appearance Attribute appearance	This prop should not be used anymore. Use variant prop instead. Deprecated
Property size Attribute size	The size of the status tag component. type: IcSizes - "default" \| "large" \| "small"	"default"
Property small Attribute small	This prop should not be used anymore. Set prop `size` to "small" instead. Deprecated	false
Property status Attribute status	The colour of the status tag. type: IcStatusTagStatuses - "danger" \| "neutral" \| "success" \| "warning"	"neutral"
Property variant Attribute variant	The emphasis of the status tag. type: IcEmphasisType - "filled" \| "outlined"	"filled"

Property

label

Attribute

label

The content rendered within the status tag.

Required

type: string

Property

announced

Attribute

announced

Iftrue , role='status' is added to the component and it will act as an 'aria-live' region. Screen readers will announce changes to thelabel , but not the initial value.

type: boolean

Default: false

Property

appearance

Attribute

appearance

This prop should not be used anymore. Use variant prop instead.

Deprecated

Property

size

Attribute

size

The size of the status tag component.

type: IcSizes - "default" | "large" | "small"

Default: "default"

Property

small

Attribute

small

This prop should not be used anymore. Set prop `size` to "small" instead.

Deprecated

Default: false

Property

status

Attribute

status

The colour of the status tag.

type: IcStatusTagStatuses - "danger" | "neutral" | "success" | "warning"

Default: "neutral"

Property

variant

Attribute

variant

The emphasis of the status tag.

type: IcEmphasisType - "filled" | "outlined"

Default: "filled"

Variants

Emphasis

Interactive example

Neutral

Success

Warning

Error

Web component

React

<ic-status-tag
label="Neutral"
status="neutral"
variant="outlined"
></ic-status-tag>
<ic-status-tag
label="Success"
status="success"
variant="outlined"
></ic-status-tag>
<ic-status-tag
label="Warning"
status="warning"
variant="outlined"
></ic-status-tag>
<ic-status-tag
label="Error"
status="danger"
variant="outlined"
></ic-status-tag>

<IcStatusTaglabel="Neutral"status="neutral"variant="outlined"/>
<IcStatusTaglabel="Success"status="success"variant="outlined"/>
<IcStatusTaglabel="Warning"status="warning"variant="outlined"/>
<IcStatusTaglabel="Error"status="danger"variant="outlined"/>

Sizes

Interactive example

Neutral

Success

Warning

Web component

React

<ic-status-tag
label="Neutral"
status="neutral"
size="small"
></ic-status-tag>
<ic-status-tag
label="Success"
status="success"
size="default"
></ic-status-tag>
<ic-status-tag
label="Warning"
status="warning"
size="large"
></ic-status-tag>

<IcStatusTaglabel="Neutral"status="neutral"size="small"/>
<IcStatusTaglabel="Success"status="success"size="default"/>
<IcStatusTaglabel="Warning"status="warning"size="large"/>

Last reviewed 31 May 2024 .