REACT COMPONENT

Button

Reusable React exports, live props, and complete source.

Source file

'use client';
import { useState } from 'react';
import { Button, UIIcon } from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example() {
  const [status, setStatus] = useState('');
  return (
    <><div style={{display:"flex",flexWrap:"wrap",alignItems:"center",justifyContent:"center",gap:12}}><Button size="md" variant="primary" onClick={() => setStatus('Action handled by the React export.')}>{"Continue"}</Button><Button variant="secondary" trailingIcon={<UIIcon name="arrow-right" />} onClick={() => setStatus('Continue action handled locally.')}>Continue</Button><Button variant="ghost" onClick={() => setStatus('Marked as done locally.')}>Mark as done</Button><Button variant="danger" onClick={() => setStatus('Delete action previewed locally.')}>Delete</Button></div>{status && <p role="status">{status}</p>}</>
  );
}

Customize this example

Controls customize the first button. The companion actions show secondary, ghost and danger treatments.

Size

Variant

State

Icons

Label

Use in your React app

Download the local package, install its React peers, then import the export and stylesheet. This package is not published to npm.

npm install react@^19 react-dom@^19 ./helios-ui-react-0.1.0.tgz

Download React package ↓Download all source (JSON) ↓

The Code tab renders the same exports used in this preview. Source files include typed props, behavior, styles, and dependency details.

Variants

Primary, bordered, soft accent and destructive actions share the same component and focus behavior.

'use client';
import {useState} from 'react';
import {Button} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){
  const [status,setStatus]=useState('');
  return (<><div style={{display:'flex',gap:12,flexWrap:'wrap'}}>{(['primary','secondary','ghost','danger'] as const).map(variant=><Button key={variant} variant={variant} onClick={()=>setStatus(variant+' action handled locally.')}>Button text</Button>)}</div><p role="status">{status}</p></>);
}

Sizes

Five Helios sizes retain the recorded design-system geometry. Icon actions remain square at every size.

'use client';
import {useState} from 'react';
import {Button} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){
  const [status,setStatus]=useState('');
  return (<div style={{display:'flex',alignItems:'center',gap:12,flexWrap:'wrap'}}>{(['xs','sm','md','lg','xl'] as const).map(size=><Button size={size} key={size} onClick={()=>setStatus(size+' action handled locally.')}>{size.toUpperCase()}</Button>)}<p role="status">{status}</p></div>);
}

Icons

Use leading and trailing React nodes, or an icon-only action with an accessible label.

'use client';
import {useState} from 'react';
import {Button, UIIcon} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){
  const [status,setStatus]=useState('');
  return (<><Button leadingIcon={<UIIcon name="plus" />} onClick={()=>setStatus('New project selected.')}>New project</Button><Button variant="secondary" trailingIcon={<UIIcon name="arrow-right" />} onClick={()=>setStatus('Continue selected.')}>Continue</Button><Button iconOnly aria-label="Add project" leadingIcon={<UIIcon name="plus" />} onClick={()=>setStatus('Add project selected.')}/><p role="status">{status}</p></>);
}

Disabled and loading

Disabled actions cannot activate. Loading replaces the leading icon and exposes its busy state.

'use client';
import {useState} from 'react';
import {Button} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){
  
  return (<div>{(['primary','secondary','ghost','danger'] as const).map(variant=><Button key={variant} variant={variant} disabled>Unavailable</Button>)}<Button loading>Saving changes</Button></div>);
}

Props

Generated from the TypeScript export Button. Configure this example with the preview controls above.

Prop	Type / behavior
`disabled`	boolean \| undefined
`onClick`	MouseEventHandler<HTMLButtonElement> \| undefined
`size`	"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined
`variant`	"primary" \| "secondary" \| "tertiary" \| "ghost" \| "link-gray" \| "link-color" \| "danger" \| undefined
`loading`	boolean \| undefined
`leadingIcon`	ReactNode
`trailingIcon`	ReactNode
`iconOnly`	boolean \| undefined

Explore composed examples

Built from the same components

Forms, tables, charts and composers share Button, Input, Select, Checkbox, Tabs and Dialog.

Composition state

Team members

Fictional records · client-side sorting, selection and export

12 members

Filter by role

Filter by status

Example team members
Select visible rows
Select Aarav Shah	Aarav Shahaarav@example.com	Status for Aarav Shah	Designer	₹1,250
Select Diya Rao	Diya Raodiya@example.com	Status for Diya Rao	Developer	₹2,500
Select Ishaan Patel	Ishaan Patelishaan@example.com	Status for Ishaan Patel	Admin	₹3,750
Select Kavya Nair	Kavya Nairkavya@example.com	Status for Kavya Nair	Designer	₹5,000
Select Rohan Mehta	Rohan Mehtarohan@example.com	Status for Rohan Mehta	Developer	₹6,250

Revenue overview

Illustrative INR data · totals match the visible period

Chart period

₹33,800Show revenue series

Jan: ₹4,200

Accessible data table

Revenue in INR
Month	Revenue
Jan	₹4,200
Feb	₹5,100
Mar	₹4,600
Apr	₹6,800
May	₹5,900
Jun	₹7,200

Keyboard and motion

Tab reaches controls; Space and Enter activate buttons. Native Select supports keyboard selection and mobile pickers. Tabs use arrows, Home and End. Dialog contains focus, closes with Escape, and restores focus. Data tables expose sort and selection state. Reduced motion removes spinners and chart transitions.

Primary labels adapt to the chosen accent for contrast. This accessibility adjustment differs from Figma’s white-on-cyan example. The Select example uses a React Aria popover with rich option content and keyboard typeahead. Native Select remains available for simple platform-picker integrations.

REACT COMPONENT

Button

Reusable React exports, live props, and complete source.

Figma source ↗

Source file

'use client';
import { useState } from 'react';
import { Button, UIIcon } from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example() {
  const [status, setStatus] = useState('');
  return (
    <><div style={{display:"flex",flexWrap:"wrap",alignItems:"center",justifyContent:"center",gap:12}}><Button size="md" variant="primary" onClick={() => setStatus('Action handled by the React export.')}>{"Continue"}</Button><Button variant="secondary" trailingIcon={<UIIcon name="arrow-right" />} onClick={() => setStatus('Continue action handled locally.')}>Continue</Button><Button variant="ghost" onClick={() => setStatus('Marked as done locally.')}>Mark as done</Button><Button variant="danger" onClick={() => setStatus('Delete action previewed locally.')}>Delete</Button></div>{status && <p role="status">{status}</p>}</>
  );
}

Customize this example

Controls customize the first button. The companion actions show secondary, ghost and danger treatments.

Size

Variant

State

Icons

Label

Use in your React app

Download the local package, install its React peers, then import the export and stylesheet. This package is not published to npm.

npm install react@^19 react-dom@^19 ./helios-ui-react-0.1.0.tgz

Download React package ↓Download all source (JSON) ↓

The Code tab renders the same exports used in this preview. Source files include typed props, behavior, styles, and dependency details.

Variants

Primary, bordered, soft accent and destructive actions share the same component and focus behavior.

'use client';
import {useState} from 'react';
import {Button} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){
  const [status,setStatus]=useState('');
  return (<><div style={{display:'flex',gap:12,flexWrap:'wrap'}}>{(['primary','secondary','ghost','danger'] as const).map(variant=><Button key={variant} variant={variant} onClick={()=>setStatus(variant+' action handled locally.')}>Button text</Button>)}</div><p role="status">{status}</p></>);
}

Sizes

Five Helios sizes retain the recorded design-system geometry. Icon actions remain square at every size.

'use client';
import {useState} from 'react';
import {Button} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){
  const [status,setStatus]=useState('');
  return (<div style={{display:'flex',alignItems:'center',gap:12,flexWrap:'wrap'}}>{(['xs','sm','md','lg','xl'] as const).map(size=><Button size={size} key={size} onClick={()=>setStatus(size+' action handled locally.')}>{size.toUpperCase()}</Button>)}<p role="status">{status}</p></div>);
}

Icons

Use leading and trailing React nodes, or an icon-only action with an accessible label.

'use client';
import {useState} from 'react';
import {Button, UIIcon} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){
  const [status,setStatus]=useState('');
  return (<><Button leadingIcon={<UIIcon name="plus" />} onClick={()=>setStatus('New project selected.')}>New project</Button><Button variant="secondary" trailingIcon={<UIIcon name="arrow-right" />} onClick={()=>setStatus('Continue selected.')}>Continue</Button><Button iconOnly aria-label="Add project" leadingIcon={<UIIcon name="plus" />} onClick={()=>setStatus('Add project selected.')}/><p role="status">{status}</p></>);
}

Disabled and loading

Disabled actions cannot activate. Loading replaces the leading icon and exposes its busy state.

'use client';
import {useState} from 'react';
import {Button} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){
  
  return (<div>{(['primary','secondary','ghost','danger'] as const).map(variant=><Button key={variant} variant={variant} disabled>Unavailable</Button>)}<Button loading>Saving changes</Button></div>);
}

Props

Generated from the TypeScript export Button. Configure this example with the preview controls above.

Prop	Type / behavior
`disabled`	boolean \| undefined
`onClick`	MouseEventHandler<HTMLButtonElement> \| undefined
`size`	"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined
`variant`	"primary" \| "secondary" \| "tertiary" \| "ghost" \| "link-gray" \| "link-color" \| "danger" \| undefined
`loading`	boolean \| undefined
`leadingIcon`	ReactNode
`trailingIcon`	ReactNode
`iconOnly`	boolean \| undefined

Explore composed examples

Built from the same components

Forms, tables, charts and composers share Button, Input, Select, Checkbox, Tabs and Dialog.

Composition state

Team members

Fictional records · client-side sorting, selection and export

12 members

Filter by role

Filter by status

Example team members
Select visible rows
Select Aarav Shah	Aarav Shahaarav@example.com	Status for Aarav Shah	Designer	₹1,250
Select Diya Rao	Diya Raodiya@example.com	Status for Diya Rao	Developer	₹2,500
Select Ishaan Patel	Ishaan Patelishaan@example.com	Status for Ishaan Patel	Admin	₹3,750
Select Kavya Nair	Kavya Nairkavya@example.com	Status for Kavya Nair	Designer	₹5,000
Select Rohan Mehta	Rohan Mehtarohan@example.com	Status for Rohan Mehta	Developer	₹6,250

Revenue overview

Illustrative INR data · totals match the visible period

Chart period

₹33,800Show revenue series

Jan: ₹4,200

Accessible data table

Revenue in INR
Month	Revenue
Jan	₹4,200
Feb	₹5,100
Mar	₹4,600
Apr	₹6,800
May	₹5,900
Jun	₹7,200

Button

Customize this example

Use in your React app

Variants

Sizes

Icons

Disabled and loading

Props

Built from the same components

Personal information

Team members

Team member

Revenue overview

Team conversation

Keyboard and motion

Search Helios UI

Button

Customize this example

Use in your React app

Variants

Sizes

Icons

Disabled and loading

Props

Built from the same components

Personal information

Team members

Team member

Revenue overview

Team conversation

Keyboard and motion

Search Helios UI