Button

Save, submit, or move to the next step. Give users a clear action for the task they want to complete.

<sy-button>Installation guide Basic usage

Live preview

Save

Press the button to try it.

Text Styles Size Icons

DisabledLoadingFull width

View code

HTML

<sy-button variant="primary" size="medium">Save</sy-button>

Usage guide

Use a Button to execute the user's choice. Use links for navigation. Within one task area, emphasize the most important action first.

Primary action

For save and submit, use primary to make the next action clear.

Secondary action

For cancel and back, use default or secondary.

Lightweight action

For supplementary features, use borderless to reduce emphasis.

Use loading for actions in progress and disabled for unavailable actions.

Examples

Styles

For primary actions, use primary; for secondary actions, use default or secondary. borderless works well for lightweight actions.

Primary

Default

Secondary

Borderless

View code

HTML

<sy-button variant="primary">Primary</sy-button>
<sy-button variant="default">Default</sy-button>
<sy-button variant="secondary">Secondary</sy-button>
<sy-button variant="borderless">Borderless</sy-button>

Icons

Place an SVG before or after the text in the default slot. For an icon-only button, set icon-only and an accessible name using tooltip.

New item

Next step

View code

HTML

<sy-button variant="primary">
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.8"
    stroke-linecap="round"
    aria-hidden="true"
  >
    <path d="M12 5v14M5 12h14" />
  </svg>
  New item
</sy-button>

<sy-button>
  Next step
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.8"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
  >
    <path d="M5 12h14m-6-6 6 6-6 6" />
  </svg>
</sy-button>

<sy-button icon-only tooltip="Add item">
  <svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.8"
    stroke-linecap="round"
    aria-hidden="true"
  >
    <path d="M12 5v14M5 12h14" />
  </svg>
</sy-button>

Size

small 24px, medium 32px, large 40px. Choose a size that matches the interface density. The default is medium.

Small

Medium

Large

View code

HTML

<sy-button variant="primary" size="small">Small</sy-button>
<sy-button variant="primary" size="medium">Medium</sy-button>
<sy-button variant="primary" size="large">Large</sy-button>

Status

disabled indicates an unavailable action; loading indicates an action in progress. Both states block additional clicks.

Save

Saving

View code

HTML

<sy-button variant="primary">Save</sy-button>
<sy-button variant="primary" disabled>Save</sy-button>
<sy-button variant="primary" loading>Saving</sy-button>

Full width

full-width fills the parent's width. Use it for form submission or primary actions on narrow screens.

Continue

View code

HTML

<sy-button variant="primary" full-width>Continue</sy-button>

Icon button tooltip

Label an icon-only action with a tooltip shown on hover or focus.

View code

HTML

<sy-button icon-only tooltip="Add an item"><svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.8"
    stroke-linecap="round"
    aria-hidden="true"
  >
    <path d="M12 5v14M5 12h14" />
  </svg></sy-button>

Feature examples

Choose a feature from 14 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview (Dev)

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.

Property · Disabled

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Form validation

Regular submission is blocked when required fields are empty. A button with formnovalidate skips this check, useful for saving incomplete drafts. Keep server-side validation in place.

View code

HTML

Loading the example.

Property · Full Width

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Loading

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Size

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Type

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Variant

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Methods · Method / setBlur&setFocus

Use the example's buttons to call methods and inspect their results.

View code

HTML

Loading the example.

Methods · Method / setClick

Use the example's buttons to call methods and inspect their results.

View code

HTML

Loading the example.

Events · Click

Interact with the component to see event names and payloads in the live preview below.

View code

HTML

Loading the example.

Slot ·

Compare the content placed inside the component with its slot names in the code.

View code

HTML

Loading the example.

Usage examples · Icon button tooltip

Label an icon-only action with a tooltip shown on hover or focus.

View code

HTML

<sy-button icon-only tooltip="Add an item"><svg
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.8"
    aria-hidden="true"
  >
    <path d="M12 5v14M5 12h14" />
  </svg></sy-button>

API reference

Hover over a name or focus it with the keyboard to see an example. On touch screens, tap the name.

Properties

Type	Default	Description
`default \| primary \| secondary \| borderless`	`default`	Visual style of the button
`small \| medium \| large`	`medium`	Button size
`boolean`	`false`	Block clicks and keyboard activation
`boolean`	`false`	Show progress and block additional clicks
`boolean`	`false`	Fill the parent's width
`boolean`	`false`	Configure an icon-only button. Place only an icon in the slot
`string`	`""`	Default tooltip. Accessible name for an icon-only button
`button \| submit \| reset`	`button`	Standard action, form submission, or reset
`boolean`	`false`	Skip form validation on submit

Slots

Name	Description
	Button text and icons. Add them as child elements without a slot name.

Methods

Method	Returns	Description
	`Promise<void>`	Click the internal button. Does not run when disabled or loading
	`Promise<void>`	Focus the internal button
	`Promise<void>`	Remove focus from the internal button
	`Promise<void>`	Update the group direction and the shape of the first and last buttons. In normal use, `sy-button-group` manages this, so place the button inside a group.

Events

Event	Description
	The standard click event for a button. Subscribe with `addEventListener`. Handle form submission in the form's `submit` event.

The examples below target a button with id="action-button".

JavaScript

const button = document.querySelector('#action-button');
await customElements.whenDefined('sy-button');
button.addEventListener('click', () => {
  console.log('Button clicked.');
});
await button.setFocus();