Phoundry UI

ButtonCheckbox

Checkbox semantics (`role="checkbox"`, `aria-checked`) with `Button` visuals. Inherits most `Button` props except `onclick`, `active`, and link-related props.

import { ButtonCheckbox } from 'phoundry-ui';

Basic Usage

Status: Unchecked
Show code 
<ButtonCheckbox bind:checked>
	Accept Terms
</ButtonCheckbox>

Variants

Show code 
<ButtonCheckbox bind:checked variant="primary">Primary</ButtonCheckbox>
<ButtonCheckbox bind:checked variant="secondary">Secondary</ButtonCheckbox>
<ButtonCheckbox bind:checked variant="outline">Outline</ButtonCheckbox>
<ButtonCheckbox bind:checked variant="danger">Danger</ButtonCheckbox>
<ButtonCheckbox bind:checked variant="ghost">Ghost</ButtonCheckbox>
<ButtonCheckbox bind:checked variant="link">Link</ButtonCheckbox>

Sizes

Show code 
<ButtonCheckbox bind:checked size="sm">Small</ButtonCheckbox>
<ButtonCheckbox bind:checked size="md">Medium</ButtonCheckbox>
<ButtonCheckbox bind:checked size="lg">Large</ButtonCheckbox>

Icon-only & loading

Show code 
<ButtonCheckbox bind:checked iconOnly title="Star thread" icon={PhiIcons.starOutline} variant="ghost" />
<ButtonCheckbox bind:checked loading variant="primary">Saving…</ButtonCheckbox>

Props

PropTypeDefaultDescription
checked requiredboolean—Two-state value (bindable).
onchange (checked: boolean) => void—Called after toggling; receives the new checked state.
disabled booleanfalseDisables the control.
variant 'primary' | 'secondary' | 'outline' | 'danger' | 'ghost' | 'link''secondary'Same variants as `Button`.
size 'xs' | 'sm' | 'md' | 'lg''md'Matches `Button` sizing.
icon string—Optional Iconify icon beside the label.
iconPosition 'left' | 'right''left'Icon placement when `icon` is set.
iconOnly booleanfalseSquare icon-only layout — pair with `title` for accessibility.
loading booleanfalseShows spinner and prevents toggling.
title string—Tooltip text (phoundry tooltip system).
noTooltip booleanfalseUse native `title` attribute instead of the tooltip attachment.
class string—Merged onto the outer `Button` wrapper.
children Snippet—Label next to the faux checkbox.
...rest HTMLButtonAttributes—Forwarded to the inner `Button` (e.g. `aria-*`, `id`, keyboard handlers). Not for `href` — this stays a checkbox button.

Usage notes

  • Use for toolbar toggles or dense lists where a checkbox box would feel out of place.
  • For forms that submit natively, prefer plain Checkbox with a name + hidden input.
  • Space/Enter toggle the control; click hits the full button surface.