Button

A brandless <button> element. No defaults are applied for colors — the component renders as a plain browser button until tokens are provided via a modifier class.

Demo

Usage


import { Button } from '@froglet/ui'
 
<Button type="button" onClick={handleClick}>
  Save changes
</Button>
 
// Themed
<Button className="button--primary">Primary</Button>
<Button className="button--danger" type="button">Delete</Button>
 
// With icon (gap is controlled by --button-gap)
<Button className="button--primary">
  <svg .../>
  Save
</Button>
 
// Icon-only (equal padding collapses to square)
<Button className="button--primary" aria-label="Save" style={{ '--button-padding': '0.5rem' }}>
  <svg .../>
</Button>

Props

Prop	Type	Description
`children`	`ReactNode`	Button label. Supports text, icons, and other React nodes.
`className`	`string`	Additional CSS classes. Use to apply a token block.
`ref`	`React.Ref<HTMLButtonElement>`	Forwarded to the underlying `<button>`.
`...props`	`ButtonHTMLAttributes<HTMLButtonElement>`	All standard button attributes (`type`, `disabled`, etc.).

CSS Custom Properties

All color properties have no fallback and must be set by the consumer. Structural properties have neutral defaults.

Token	Default	Description
`--button-background-color`	—	Background color.
`--button-text-color`	—	Text color.
`--button-border-color`	—	Border color.
`--button-border-style`	`solid`	Border style.
`--button-border-width`	`2px`	Border width.
`--button-border-radius`	`0`	Corner radius.
`--button-font-size`	`1rem`	Font size.
`--button-padding`	`0.5rem 1rem`	Inner padding.
`--button-gap`	`4px`	Gap between icon and text label.
`--button-background-color-hover`	—	Background on hover.
`--button-text-color-hover`	—	Text color on hover.
`--button-outline-color-focus`	—	Focus ring color.
`--button-outline-width-focus`	`2px`	Focus ring width.
`--button-outline-offset-focus`	`2px`	Focus ring offset.
`--button-background-color-disabled`	—	Background when disabled.
`--button-text-color-disabled`	—	Text color when disabled.
`--button-border-color-disabled`	—	Border color when disabled.

Accessibility

Renders as a semantic <button> with full keyboard and screen reader support.
Focus is indicated via :focus-visible — keyboard users see the ring; pointer users do not.
disabled removes interactivity and updates visual state via the disabled token set.
Always provide a meaningful label via children or aria-label.