sesamy-button

A styled button component used inside the other Sesamy components, and available for your own UI so it matches the Sesamy elements on the page.

Props/Attributes

• variant - Visual style: primary, secondary, or tertiary
• size - Button size: sm, md, or lg
• loading - Boolean that shows a loading state
• disabled - Boolean that disables the button
• href - Renders the button as a link to this URL
• type - Button type forwarded to the underlying <button> element (for example submit)
• part - Forwarded as a CSS shadow part, so you can style the internal element with ::part()

Slots

The default slot holds the button label:

<sesamy-button variant="primary" size="md">Subscribe to ACME Plus</sesamy-button>

<sesamy-button variant="secondary" href="/account">My account</sesamy-button>

Design Tokens

The button takes its accent colour from the global --sesamy-primary-color token:

<sesamy-button variant="primary" style="--sesamy-primary-color: #0e62a8">
  Subscribe
</sesamy-button>

See Styling Components for the global tokens and the sizing model.

Next Steps

• Styling Components - Styling model and global tokens
• sesamy-paywall - Drop-in paywall
• sesamy-login - Login button and user menu