Button

An interactive element that performs an action when clicked.

Button

import { Button } from '@ontoui/react';

<Button.Root>
  <Button.Text>Button</Button.Text>
</Button.Root>;

Anatomy

Part	Element	Description
Button.Root	<button>	The interactive element that performs the action.
Button.Icon	<span>	A decorative icon slot. Hidden from screen readers.
Button.Text	<span>	The button label.

Examples

Variant

Use the variant prop to control the visual style of the button.

PrimarySecondary

<Button.Root>
  <Button.Text>Primary</Button.Text>
</Button.Root>
<Button.Root variant="secondary">
  <Button.Text>Secondary</Button.Text>
</Button.Root>

Icon

Add a Button.Icon to place an icon next to the label. The icon renders wherever you put it, so place it before or after Button.Text to get a leading or trailing icon. Any icon works — an inline SVG or a component from your icon library.

Add ItemAdd Item

<Button.Root>
  <Button.Icon>
    <PlusIcon />
  </Button.Icon>
  <Button.Text>Add Item</Button.Text>
</Button.Root>

Icon only

Omit Button.Text for an icon-only button — it renders as a square. Since the icon is hidden from screen readers, pass aria-label on Button.Root to give the button an accessible name.

<Button.Root aria-label="Add item">
  <Button.Icon>
    <PlusIcon />
  </Button.Icon>
</Button.Root>

Disabled

Use the disabled prop to prevent interaction.

PrimarySecondary

<Button.Root disabled>
  <Button.Text>Primary</Button.Text>
</Button.Root>
<Button.Root variant="secondary" disabled>
  <Button.Text>Secondary</Button.Text>
</Button.Root>

API Reference

Button.Root

Prop	Type	Default
children?	ReactNode	—
id?	string	—
className?	string	—
variant?	"primary" | "secondary"	primary
type?	"button" | "submit" | "reset"	button
disabled?	boolean	false
aria-label?	string	—
onClick?	(event: React.MouseEvent<HTMLButtonElement>) => void	—
onFocus?	(event: React.FocusEvent<HTMLButtonElement>) => void	—
onBlur?	(event: React.FocusEvent<HTMLButtonElement>) => void	—
ref?	Ref<HTMLButtonElement>	—

Button.Icon

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLButtonElement>	—

Button.Text

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLButtonElement>	—