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 size Attribute size	The size of the status tag component. type: IcSizes - "large" \| "medium" \| "small"	"medium"
Property status Attribute status	The colour of the status tag. type: IcStatusTagStatuses - "danger" \| "neutral" \| "success" \| "warning"	"neutral"
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: "dark" \| "light" \| "inherit" - "dark" \| "inherit" \| "light"	"inherit"
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

size

Attribute

size

The size of the status tag component.

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

Default: "medium"

Property

status

Attribute

status

The colour of the status tag.

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

Default: "neutral"

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: "dark" | "light" | "inherit" - "dark" | "inherit" | "light"

Default: "inherit"

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="medium"
></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="medium"/>
<IcStatusTaglabel="Warning"status="warning"size="large"/>

Large

Interactive example

Neutral

Success

Warning

Error

Web component

React

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

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

Theme

Interactive example

Neutral

Success

Warning

Error

Web component

React

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

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

Last reviewed 29 August 2024 .