Buttons

Buttons are interactive elements that link to external resources or other pages. Each button can include an icon and, by default, opens links in a new tab.

Properties

Prop	Type	Default	Description
`title`	`string`	required	The label shown on the button.
`href`	`string`	required	The URL the button links to.
`icon`	`string`	—	Icon shown before the label. Accepts a built-in icon key (Phosphor or Simple Icons) or a custom URL.
`variant`	`'primary'` `'secondary'`	`primary`	Visual style of the button.
`target`	`'_blank'` `'_self'`	`_blank`	Where the link opens. `_blank` adds `rel="noopener noreferrer"` automatically.

Examples

Basic Button

View Documentation

<scalar-button
  title="View Documentation"
  href="https://docs.scalar.com">
</scalar-button>

<Button
  title="View Documentation"
  href="https://docs.scalar.com"
/>

Button with Icon

Download SDK

<scalar-button
  title="Download SDK"
  href="https://github.com/scalar/scalar"
  icon="phosphor/regular/download">
</scalar-button>

<Button
  title="Download SDK"
  href="https://github.com/scalar/scalar"
  icon="phosphor/regular/download"
/>

Secondary Variant

Learn More

<scalar-button
  title="Learn More"
  href="https://scalar.com"
  variant="secondary">
</scalar-button>

<Button
  title="Learn More"
  href="https://scalar.com"
  variant="secondary"
/>

Markdown Support

Callouts

The API company.