Badge

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeBadgeExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeBadgeExample/></NativeScope>}

Colors

neutral (the default) sits on light surfaces; primary is tuned for gradient surfaces like the primary button and selected navigation items.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeBadge}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeBadge>91</NativeBadge><NativeBadge color='primary'>152</NativeBadge></NativeScope>}

Kbd

The Kbd shortcut hint shares the badge shape and is included in the Helios UI React source package.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="badge" id="kbd"/>}