Button - Canvas Design System

When to Use

Use Button when: Triggering actions (save, delete, submit), navigating as a CTA, or confirming modal dialogs. Use primary for the main action, secondary for alternatives.

Don't use when: Inline text navigation — use a plain anchor instead. For toggle states, use Tabs or a checkbox.

Variants

<?= ws_button('Primary', ['variant' => 'primary']) ?>
<?= ws_button('Secondary', ['variant' => 'secondary']) ?>
<?= ws_button('Ghost', ['variant' => 'ghost']) ?>
<?= ws_button('Danger', ['variant' => 'danger']) ?>

Sizes

With Icons

<?= ws_button('Add Workshop', ['variant' => 'primary', 'icon' => 'add']) ?>
<?= ws_button('Next Step', ['variant' => 'secondary', 'icon' => 'arrow_forward', 'iconPosition' => 'right']) ?>

States

As Link

When an href is provided, the button renders as an <a> tag.

View Workshops

<?= ws_button('View Workshops', ['variant' => 'primary', 'href' => '/workshops']) ?>

Parameters

Parameter	Type	Default	Description
`$text`	string	—	Button label text
`variant`	string	`primary`	`primary` \| `secondary` \| `ghost` \| `danger`
`size`	string	`md`	`sm` \| `md` \| `lg`
`icon`	string	`null`	Material icon name
`iconPosition`	string	`left`	`left` \| `right`
`href`	string	`null`	Renders as `<a>` instead of `<button>`
`type`	string	`button`	`button` \| `submit` \| `reset`
`disabled`	bool	`false`	Disabled state
`loading`	bool	`false`	Shows spinner, disables button
`fullWidth`	bool	`false`	Stretch to container width
`id`	string	`null`	Element ID
`class`	string	`''`	Additional CSS classes
`attrs`	array	`[]`	Extra HTML attributes

Phase Theming

The secondary variant inherits --phase-color for its text and border. Set this variable on a parent to theme buttons per phase or app.

<!-- Set --phase-color on any parent container -->
<div style="--phase-color: var(--phase-plan);">
    <?= ws_button('Plan', ['variant' => 'secondary']) ?>
</div>

Anatomy

.ws-btn — Outer <button> or <a>

.ws-btn__icon — Icon wrapper (left or right)

.ws-btn__text — Label text

.ws-btn__spinner — Loading spinner (when loading: true)

CSS Classes

Class	Purpose
`.ws-btn`	Base button styles
`.ws-btn--primary`	Primary variant
`.ws-btn--secondary`	Secondary variant
`.ws-btn--ghost`	Ghost variant
`.ws-btn--danger`	Danger variant
`.ws-btn--sm / --md / --lg`	Size modifiers
`.ws-btn--full`	Full-width
`.ws-btn--loading`	Loading state
`.ws-btn--icon-only`	Icon-only button (no text)

Files

File	Purpose
`includes/components/helpers.php`	`ws_button()` helper function
`includes/components/button.php`	Button template
`includes/components/components.css`	Button CSS (`.ws-btn` rules)