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

Badge

Guidance Code Accessibility

Component demo

Interactive example

Coffee orders
Web component React
StackBlitz
Show full code 
<ic-buttonvariant="secondary">
<ic-badge
label="1000"
max-number="99"
slot="badge"
variant="info"
></ic-badge>
  Coffee orders
</ic-button>

Badge details

Props

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

Name Description Default
Property accessibleLabel
Attribute accessible-label

The accessible label of the badge component to provide context for screen reader users.

type: string - string | undefined
Property customColor
Attribute custom-color

The custom badge colour. This will only style the badge component if variant="custom". Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".

type: IcColor - `#${string}` | `rgb(${string})` | `rgba(${string})` | undefined
Property label
Attribute label

The text displayed in the badge. This will only be displayed if type="text".

type: string - string | undefined
Property maxNumber
Attribute max-number

The maximum number shown on the badge appended with a +. This will only be displayed if type="text" and label is not empty.

type: number - number | undefined
Property position
Attribute position

The positioning of the badge in reference to the parent element.

type: IcBadgePositions - "far" | "inline" | "near" | undefined
"far"
Property size
Attribute size

The size of the badge to be displayed.

type: IcSizes - "large" | "medium" | "small" | undefined
"medium"
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: IcThemeMode - "dark" | "inherit" | "light" | undefined
"inherit"
Property type
Attribute type

The type of badge to be displayed.

type: IcBadgeTypes - "dot" | "icon" | "text" | undefined
"text"
Property variant
Attribute variant

The variant of the badge to be displayed.

type: IcBadgeVariants - "custom" | "error" | "info" | "light" | "neutral" | "success" | "warning" | undefined
"neutral"
Property visible
Attribute visible

Iftrue , the badge will be displayed.

type: boolean - boolean | undefined
true
Property accessibleLabel
Attribute accessible-label

The accessible label of the badge component to provide context for screen reader users.

type: string - string | undefined
Property customColor
Attribute custom-color

The custom badge colour. This will only style the badge component if variant="custom". Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".

type: IcColor - `#${string}` | `rgb(${string})` | `rgba(${string})` | undefined
Property label
Attribute label

The text displayed in the badge. This will only be displayed if type="text".

type: string - string | undefined
Property maxNumber
Attribute max-number

The maximum number shown on the badge appended with a +. This will only be displayed if type="text" and label is not empty.

type: number - number | undefined
Property position
Attribute position

The positioning of the badge in reference to the parent element.

type: IcBadgePositions - "far" | "inline" | "near" | undefined
Default: "far"
Property size
Attribute size

The size of the badge to be displayed.

type: IcSizes - "large" | "medium" | "small" | undefined
Default: "medium"
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: IcThemeMode - "dark" | "inherit" | "light" | undefined
Default: "inherit"
Property type
Attribute type

The type of badge to be displayed.

type: IcBadgeTypes - "dot" | "icon" | "text" | undefined
Default: "text"
Property variant
Attribute variant

The variant of the badge to be displayed.

type: IcBadgeVariants - "custom" | "error" | "info" | "light" | "neutral" | "success" | "warning" | undefined
Default: "neutral"
Property visible
Attribute visible

Iftrue , the badge will be displayed.

type: boolean - boolean | undefined
Default: true

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Read more about slots .


Name Description
Slot badge-icon
Icon will be rendered inside the badge if type is set to icon.
Slot badge-icon
Icon will be rendered inside the badge if type is set to icon.

Variants

Sizes

Interactive example

Coffee orders Coffee orders Coffee orders
Web component React
StackBlitz
Show full code 
<ic-buttonsize="small"variant="secondary">
<ic-badgelabel="8"slot="badge"variant="info"></ic-badge>
  Coffee orders
</ic-button>
<ic-buttonvariant="secondary">
<ic-badgesize="medium"label="8"slot="badge"variant="info"></ic-badge>
  Coffee orders
</ic-button>
<ic-buttonsize="large"variant="secondary">
<ic-badgesize="large"label="8"slot="badge"variant="info"></ic-badge>
  Coffee orders
</ic-button>

Status

Interactive example

Coffee orders Coffee orders Coffee orders Coffee orders
Web component React
StackBlitz
Show full code 
<ic-buttonvariant="secondary">
<ic-badgeslot="badge"label="8"variant="neutral"></ic-badge>
  Coffee orders
</ic-button>
<ic-buttonvariant="secondary">
<ic-badgeslot="badge"label="New"variant="info"></ic-badge>
  Coffee orders
</ic-button>
<ic-buttonvariant="secondary">
<ic-badgeslot="badge"label="Unavailable"variant="error"></ic-badge>
  Coffee orders
</ic-button>
<ic-buttonvariant="secondary">
<ic-badgeslot="badge"label="Available"variant="success"></ic-badge>
  Coffee orders
</ic-button>

Types

Interactive example

Coffee orders Coffee orders Coffee orders
Web component React
StackBlitz
Show full code 
<ic-buttonvariant="secondary">
<ic-badgeslot="badge"type="text"label="8"variant="info"></ic-badge>
  Coffee orders
</ic-button>
<ic-buttonvariant="secondary">
<ic-badgeslot="badge"type="dot"variant="info"></ic-badge>
  Coffee orders
</ic-button>
<ic-buttonvariant="secondary">
<ic-badgetype="icon"slot="badge"variant="info">
<svg
slot="badge-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
aria-label="retry"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<path
d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
/>
</svg>
</ic-badge>
  Coffee orders
</ic-button>

Max number

Interactive example

Coffee orders
Web component React
StackBlitz
Show full code 
<ic-buttonvariant="secondary">
<ic-badge
label="1000"
max-number="99"
slot="badge"
variant="info"
></ic-badge>
  Coffee orders
</ic-button>

Positioning

Interactive example

Web component React
StackBlitz
Show full code 
<ic-chiplabel="Americano">
<ic-badgetype="icon"slot="badge"position="near"variant="success">
<svg
slot="badge-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
aria-label="success"
>
<pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
</svg>
</ic-badge>
</ic-chip>
<ic-chiplabel="Americano">
<ic-badgetype="icon"slot="badge"position="far"variant="success">
<svg
slot="badge-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
aria-label="success"
>
<pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
</svg>
</ic-badge>
</ic-chip>

Position inline

Interactive example

About Ingredients Orders About page
Web component React
StackBlitz
Show full code 
<ic-tab-context>
<ic-tab-grouplabel="Example tab group">
<ic-tab>
      About
</ic-tab>
<ic-tab>
      Ingredients
</ic-tab>
<ic-tab>
<ic-badge
label="8"
slot="badge"
position="inline"
size="large"
accessible-label="1 notification found"
variant="info"
></ic-badge>
      Orders
</ic-tab>
</ic-tab-group>
<ic-tab-panel>About page</ic-tab-panel>
<ic-tab-panel>Ingredients page</ic-tab-panel>
<ic-tab-panel>Orders page</ic-tab-panel>
</ic-tab-context>

Hide and show badge

Click the button to hide and show the badge.

Interactive example

Coffee orders
Web component React
StackBlitz
Show full code 
<ic-buttonvariant="secondary"onclick="showHideBadge()">
<ic-badgelabel="8"slot="badge"></ic-badge>
  Coffee orders
</ic-button>

Accessible label

Interactive example

Coffee orders
Web component React
StackBlitz
Show full code 
<ic-buttonvariant="secondary">
<ic-badge
label="8"
slot="badge"
size="large"
variant="info"
accessible-label="8 coffee orders found"
>
</ic-badge>
  Coffee orders
</ic-button>

Custom Colour

Interactive example

Coffee orders Coffee orders Coffee orders Coffee orders
Web component React
StackBlitz
Show full code 
<ic-buttonvariant="secondary">
<ic-badgeslot="badge"type="text"custom-color="#F8C8DC"label="16"variant="custom"></ic-badge>
  Coffee orders
</ic-button>
<ic-buttonvariant="secondary">
<ic-badgeslot="badge"type="dot"custom-color="#F8C8DC"variant="custom"></ic-badge>
  Coffee orders
</ic-button>
<ic-buttonvariant="secondary">
<ic-badgetype="icon"slot="badge"custom-color="#F8C8DC"variant="custom">
<svg
slot="badge-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
aria-label="retry"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
</svg>
</ic-badge>
  Coffee orders
</ic-button>
<ic-buttonvariant="secondary">
<ic-badgeslot="badge"size="large"custom-color="#F8C8DC"label="New"variant="custom"></ic-badge>
  Coffee orders
</ic-button>

Theme

Interactive example

Coffee orders
Web component React
StackBlitz
Show full code 
<ic-buttonvariant="secondary"theme="dark">
<ic-badge
label="1000"
max-number="99"
slot="badge"
variant="info"
theme="dark"
></ic-badge>
  Coffee orders
</ic-button>
Last reviewed 31 May 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 Badge - Intelligence Community Design System