Chip

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,NativeChipExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeChipExample/></NativeScope>}

Variants & colors

Three emphasis levels via variant - each available in seven color pairs via color.

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

StatusDot

The StatusDot indicator pairs with chips inside selects and tables. NativeStatusDot 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="chip" id="status-dot"/>}