Button

Versatile button with multiple variants, sizes, icon support, loading state, and automatic tooltip integration.

import { Button } from 'phoundry-ui';

Variants

Show code

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="danger">Danger</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Sizes

Show code

<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

With Icons

Show code

<Button icon={PhiIcons.add} variant="primary">Add Item</Button>
<Button icon={PhiIcons.edit} iconPosition="right">Settings</Button>
<Button icon={PhiIcons.close} iconOnly title="Close" />

States

Show code

<Button loading>Saving...</Button>
<Button active>Active</Button>
<Button disabled>Disabled</Button>

Full width

Show code

<div class="w-64">
	<Button variant="primary" fullWidth>Continue</Button>
</div>

As Link

External Link

Show code

<Button href="https://example.com" target="_blank" variant="link">External Link</Button>

Props

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'outline' \| 'danger' \| 'ghost' \| 'link'	'secondary'	Visual style of the button.
size	'xs' \| 'sm' \| 'md' \| 'lg'	'md'	Canonical control scale — heights, typography, padding, and icon px shared via controlSizes.
icon	string	—	Iconify icon string shown alongside or instead of text.
iconPosition	'left' \| 'right'	'left'	Which side to place the icon on.
iconOnly	boolean	false	Render only the icon with square padding. Use with title for accessibility.
loading	boolean	false	Show a spinner and disable interaction.
active	boolean	false	Highlight the button as currently active/selected.
disabled	boolean	false	Disable the button.
class	string	—	Additional CSS classes merged onto the outer interactive element.
element	HTMLButtonElement \| HTMLAnchorElement	—	Bindable reference to the underlying button or anchor.
href	string	—	When provided, renders an <a> tag instead of <button>.
target	string	—	Link target when using href (e.g. _blank).
rel	string	—	Optional link rel; defaults to noopener noreferrer when target is _blank.
title	string	—	Tooltip text (uses the phoundry-ui tooltip system by default).
noTooltip	boolean	false	Use native title attribute instead of tooltip system.
fullWidth	boolean	false	Stretch the button to the width of its parent.
onclick	(e: MouseEvent) => void	—	Click handler.
children	Snippet	—	Button label content.
...rest	HTMLButtonAttributes	—	Other native attributes (type, aria-, data-, keyboard handlers, etc.) are forwarded to the DOM element.

Usage tips

Use iconOnly with a title prop for accessible icon buttons — the tooltip appears automatically.
Set noTooltip to use the native browser title attribute instead of the phoundry-ui tooltip system.
The link variant removes height and padding — it renders inline like a text link.
ButtonGroup renders text-only segments inside an inset, rounded shell; use Button elsewhere for icons, variants, or links.