Buttons
Buttons are interactive elements that create clickable links to external resources. They're perfect for directing users to documentation, downloads, or any external URL. Each button can include an icon and opens links in a new tab for better user experience.
PropertiesCopied!
titleCopied!
string
required
The text displayed on the button. This is the primary label that users will see and click on.
hrefCopied!
string
required
The URL that the button links to. When clicked, this will open in a new tab with proper security attributes (rel="noopener noreferrer"
).
iconCopied!
string
optional
An icon to display alongside the button text. Can be either a path to a local Scalar icon or a URL to an external icon. If not provided, the button will display only text.
ExamplesCopied!
Basic ButtonCopied!
View Documentation<scalar-button
title="View Documentation"
href="https://docs.scalar.com">
</scalar-button>
Button with IconCopied!
Download SDK<scalar-button
title="Download SDK"
href="https://github.com/scalar/scalar"
icon="phosphor/regular/house">
</scalar-button>
Button with External IconCopied!
<scalar-button
title="Visit Website"
href="https://scalar.com"
icon="https://scalar.com/logo-dark.svg">
</scalar-button>