Component playground
Choose a component, try its states, and copy the PHP that renders it. Components marked auto have no curated fixture yet: the playground builds their call from the catalog.
Choose a component
Try a state
Preview
Uses the production component. Open it separately to test at any browser width.
Use this component
Something happens on click (save, delete, submit, open a modal), or when a navigation target is important enough to be a call to action. One primary per view; everything else is secondary or ghost. A form's button needs 'type' => 'submit': the default is button, which submits nothing. A form with one action puts it straight in the form's stack; two or more go in a ws_cluster_start row, primary first (DESIGN.md 11.6). With href it is a link styled as a button: use that for a way to another page, such as an empty state's "Show all workshops" or a card's "Open".
Avoid: The target is ordinary inline navigation — use a plain anchor. For switching between views use Tabs; for an on/off setting use Toggle.
Full usage and accessibility guidance
<?= ws_button('Save workshop', [
'variant' => 'primary',
'size' => 'md',
'disabled' => false,
'loading' => true,
]) ?>