Actions

Choose buttons, toggles, and clipboard controls for application actions.

Components in this categoryCopy link

ButtonCopy link

Button is the primary interactive control. Five variants (default, primary, outline, ghost, danger), two sizes (sm, md), plus leftIcon/rightIcon slots and fullWidth. Every standard <button> attribute forwards.

VariantsCopy link

SizesCopy link

With iconsCopy link

StatesCopy link

Full widthCopy link

import { Button } from "@solarius/onset";
import type { ButtonVariant, ButtonSize } from "@solarius/onset";

IconButtonCopy link

Square icon-only button. Same variants and sizes as Button, but takes an icon (any ReactNode, typically a Tabler icon) and an aria-label in place of visible text.

import { IconButton } from "@solarius/onset";
import { IconSearch } from "@tabler/icons-react";

<IconButton icon={<IconSearch size={14} />} aria-label="Search" />;

SplitButtonCopy link

SplitButton combines a primary Button with a caret dropdown on the right edge, as in an "Export CSV" ▾ control. The main onClick fires the primary action; menu provides the alternate options via an internal DropdownMenu.

import { SplitButton, MenuItem } from "@solarius/onset";

<SplitButton
  onClick={() => exportCSV()}
  menu={
    <>
      <MenuItem onClick={() => exportJSON()}>Export JSON</MenuItem>
      <MenuItem onClick={() => exportPDF()}>Export PDF</MenuItem>
    </>
  }
>
  Export CSV
</SplitButton>;

CopyButtonCopy link

CopyButton writes a value to the clipboard and confirms in place: the icon swaps to a check for timeout ms. It does not show a toast, since it usually sits next to the copied value.

import { CopyButton } from "@solarius/onset";

<CopyButton value="sk_live_abc123" label="Copy API key" />
<CopyButton value={() => getSecret()} label="Copy" />

ThemeToggleCopy link

ThemeToggle switches the nearest ThemeProvider between light and dark mode. It must be rendered inside a ThemeProvider: it drives the provider's mode, which regenerates the entire --m-* CSS variable set.

import { ThemeToggle } from "@solarius/onset";

// Must be inside a ThemeProvider
<ThemeToggle />
<ThemeToggle variant="segmented" size="sm" />