Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Status tag

Guidance Code Accessibility

Interactive example

Web component React
StackBlitz
Show full code 
<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>

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

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 - boolean | undefined
false
Property size
Attribute size

The size of the status tag component.

type: IcSizes - "large" | "medium" | "small" | undefined
"medium"
Property status
Attribute status

The colour of the status tag.

type: IcStatusTagStatuses - "danger" | "neutral" | "success" | "warning" | undefined
"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" | undefined
"inherit"
Property uppercase
Attribute uppercase

The letter case of the status tag's label.

type: boolean - boolean | undefined
true
Property variant
Attribute variant

The emphasis of the status tag.

type: IcEmphasisType - "filled" | "outlined" | undefined
"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 - boolean | undefined
Default: false
Property size
Attribute size

The size of the status tag component.

type: IcSizes - "large" | "medium" | "small" | undefined
Default: "medium"
Property status
Attribute status

The colour of the status tag.

type: IcStatusTagStatuses - "danger" | "neutral" | "success" | "warning" | undefined
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" | undefined
Default: "inherit"
Property uppercase
Attribute uppercase

The letter case of the status tag's label.

type: boolean - boolean | undefined
Default: true
Property variant
Attribute variant

The emphasis of the status tag.

type: IcEmphasisType - "filled" | "outlined" | undefined
Default: "filled"

Variants

Emphasis

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Sizes

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Large

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Theme

Interactive example

Web component React
StackBlitz
Show full code 
<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>
Last reviewed 29 August 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Status tag - Intelligence Community Design System