Button

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

Variants

Four variants via the variant prop. Primary and danger use vertical gradients, secondary is a bordered surface, and ghost uses the subtle blue action surface.

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

Sizes

Three sizes - medium (36px, the default), small (32px), and xs (24px). Icon-only buttons become square at every size.

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

Icons

Pass any Remix Icon component reference to leadingIcon / trailingIcon. Combine iconOnly with an aria-label for square icon buttons.

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

Disabled

The native disabled attribute switches every variant to its muted disabled surface.

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