Badge

BETA

Component demo

Interactive example

99+

Web component

React

<ic-buttonvariant="secondary">
<ic-badge
label="1000"
max-number="99"
slot="badge"
variant="info"
></ic-badge>
  Coffee orders
</ic-button>

<IcButtonvariant="secondary">
<IcBadgelabel="1000"maxNumber={99}slot="badge"variant="info"/>
  Coffee orders
</IcButton>

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
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})`	null
Property label Attribute label	The text displayed in the badge. This will only be displayed if type="text". type: string
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
Property position Attribute position	The positioning of the badge in reference to the parent element. type: IcBadgePositions - "far" \| "inline" \| "near"	"far"
Property size Attribute size	The size of the badge to be displayed. type: IcSizes - "large" \| "medium" \| "small"	"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"	"inherit"
Property type Attribute type	The type of badge to be displayed. type: IcBadgeTypes - "dot" \| "icon" \| "text"	"text"
Property variant Attribute variant	The variant of the badge to be displayed. type: IcBadgeVariants - "custom" \| "error" \| "info" \| "light" \| "neutral" \| "success" \| "warning"	"neutral"
Property visible Attribute visible	If`true` , the badge will be displayed. type: boolean	true

Property

accessibleLabel

Attribute

accessible-label

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

type: string

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})`

Default: null

Property

label

Attribute

label

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

type: string

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

Property

position

Attribute

position

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

type: IcBadgePositions - "far" | "inline" | "near"

Default: "far"

Property

size

Attribute

size

The size of the badge to be displayed.

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

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"

Default: "inherit"

Property

type

Attribute

type

The type of badge to be displayed.

type: IcBadgeTypes - "dot" | "icon" | "text"

Default: "text"

Property

variant

Attribute

variant

The variant of the badge to be displayed.

Default: "neutral"

Property

visible

Attribute

visible

Iftrue , the badge will be displayed.

type: boolean

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.

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

Variants

Sizes

Interactive example

Web component

React

<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>

<IcButtonsize="small"variant="secondary">
<IcBadgesize="small"label="8"slot="badge"variant="info"/>
  Coffee orders
</IcButton>
<IcButtonvariant="secondary">
<IcBadgesize="medium"label="8"slot="badge"variant="info"/>
  Coffee orders
</IcButton>
<IcButtonsize="large"variant="secondary">
<IcBadgesize="large"label="8"slot="badge"variant="info"/>
  Coffee orders
</IcButton>

Status

Interactive example

New

Unavailable

Available

Web component

React

<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>

<IcButtonvariant="secondary">
<IcBadgeslot="badge"label="8"variant="neutral"/>
  Coffee orders
</IcButton>
<IcButtonvariant="secondary">
<IcBadgeslot="badge"label="New"variant="info"/>
  Coffee orders
</IcButton>
<IcButtonvariant="secondary">
<IcBadgeslot="badge"label="Unavailable"variant="error"/>
  Coffee orders
</IcButton>
<IcButtonvariant="secondary">
<IcBadgeslot="badge"label="Available"variant="success"/>
  Coffee orders
</IcButton>

Types

Interactive example

Web component

React

<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>

<IcButtonvariant="secondary">
<IcBadgeslot="badge"type="text"label="8"variant="info"/>
  Coffee orders
</IcButton>
<IcButtonvariant="secondary">
<IcBadgeslot="badge"type="dot"variant="info"/>
  Coffee orders
</IcButton>
<IcButtonvariant="secondary">
<IcBadgetype="icon"slot="badge"variant="info">
<SlottedSVG
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"
/>
</SlottedSVG>
</IcBadge>
  Coffee orders
</IcButton>

Max number

Interactive example

99+

Web component

React

<ic-buttonvariant="secondary">
<ic-badge
label="1000"
max-number="99"
slot="badge"
variant="info"
></ic-badge>
  Coffee orders
</ic-button>

<IcButtonvariant="secondary">
<IcBadge
label="1000"
maxNumber={99}
slot="badge"
variant="info"
/>
  Coffee orders
</IcButton>

Positioning

Interactive example

Americano

Web component

React

<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>

<IcChiplabel="Americano">
<IcBadgetype="icon"slot="badge"position="near"variant="success">
<SlottedSVG
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"/>
</SlottedSVG>
</IcBadge>
</IcChip>
<IcChiplabel="Americano">
<IcBadgetype="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>
</IcBadge>
</IcChip>

Position inline

Interactive example

About

Ingredients

Orders

About page

Web component

React

<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>

<IcTabContext>
<IcTabGrouplabel="Example tab group">
<IcTab>
      About
</IcTab>
<IcTab>
      Ingredients
</IcTab>
<IcTab>
<IcBadge
label="8"
slot="badge"
position="inline"
size="large"
accessibleLabel="1 notification found"
variant="info"
/>
      Orders
</IcTab>
</IcTabGroup>
<IcTabPanel>About page</IcTabPanel>
<IcTabPanel>Ingredients page</IcTabPanel>
<IcTabPanel>Orders page</IcTabPanel>
</IcTabContext>

Hide and show badge

Click the button to hide and show the badge.

Interactive example

Web component

React

<ic-buttonvariant="secondary"onclick="showHideBadge()">
<ic-badgelabel="8"slot="badge"></ic-badge>
  Coffee orders
</ic-button>

<IcButtonvariant="secondary"onClick={handleShowHideBadge}>
<IcBadge
variant="info"
label="8"
slot="badge"
visible={showBadge}
/>
  Coffee orders
</IcButton>

Accessible label

Interactive example

Web component

React

<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>

<IcButtonvariant="secondary">
<IcBadge
label="8"
slot="badge"
size="large"
variant="info"
accessibleLabel="8 coffee orders found"
/>
  Coffee orders
</IcButton>

Theme

Interactive example

99+

Web component

React

<ic-buttonvariant="secondary"appearance="light">
<ic-badge
label="1000"
max-number="99"
slot="badge"
variant="info"
theme="dark"
></ic-badge>
  Coffee orders
</ic-button>

<IcButtonvariant="secondary"appearance="light">
<IcBadgelabel="1000"maxNumber={99}slot="badge"variant="info"theme="dark"/>
  Coffee orders
</IcButton>

Last reviewed 31 May 2024 .