Close Button

The circular ✕ used to dismiss compact surfaces, announcements, toasts, modals, and drawers. Every size renders its own glyph with a literal (not scaled) stroke - 1.6px at 2xs, 2px at xs/sm, and 2.5px at md - so the weight stays pixel-true.

2xs

Installation

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

Download React package Installation guide

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

Sizes

Four sizes via the size prop - 16, 20, 24, and 32px. Always pass an aria-label, the control has no visible text.

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeCloseButton} from '@helios-ui/react';
export function Example(){
const[closed,setClosed]=useState('');
return <NativeScope><div style={{display:"flex",gap:12}}>{(["2xs","xs","sm","md"]as const).map(size=><NativeCloseButton key={size}size={size}aria-label={"Close "+size}onClick={()=>setClosed(size)}/>)}{closed&&<output>Closed {closed} example</output>}</div></NativeScope>;
}

In a modal header

Modal title

usage

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

Advanced playground, API and recovery states ↗

Close Button

2xs

Installation

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

Download React package Installation guide

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

Sizes

Four sizes via the size prop - 16, 20, 24, and 32px. Always pass an aria-label, the control has no visible text.

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeCloseButton} from '@helios-ui/react';
export function Example(){
const[closed,setClosed]=useState('');
return <NativeScope><div style={{display:"flex",gap:12}}>{(["2xs","xs","sm","md"]as const).map(size=><NativeCloseButton key={size}size={size}aria-label={"Close "+size}onClick={()=>setClosed(size)}/>)}{closed&&<output>Closed {closed} example</output>}</div></NativeScope>;
}

In a modal header

Modal title

usage

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

Advanced playground, API and recovery states ↗

Close Button

Installation

Sizes

In a modal header

Search Helios UI

Close Button

Installation

Sizes

In a modal header

Search Helios UI