Button

<sc-button></sc-button>

Buttons let users take actions and make choices with a single click or tap.

Preview

<sc-button type="primary">Click Me</sc-button>

Code

Click Me

Type

Use the type property to set the button's type.

Preview

<sc-button>Default</sc-button>
<sc-button type="primary">Primary</sc-button>
<sc-button type="success">Success</sc-button>
<sc-button type="info">Info</sc-button>
<sc-button type="warning">Warning</sc-button>
<sc-button type="danger">Danger</sc-button>

Code

DefaultPrimarySuccessInfoWarningDanger

Size

Use the size property to set the button's size.

Preview

<sc-button size="small">Small</sc-button>
<sc-button>Default</sc-button>
<sc-button size="large">Large</sc-button>

Code

SmallDefaultLarge

Pill

Use the pill property to make the button rounded

Preview

<sc-button size="small" pill>Small</sc-button>
<sc-button pill>Default</sc-button>
<sc-button size="large" pill>Large</sc-button>

Code

SmallDefaultLarge

Circle

Use the circle property to create a circular button

Preview

<sc-button size="small" circle>👍🏻</sc-button>
<sc-button circle>👍🏻</sc-button>
<sc-button size="large" circle>👍🏻</sc-button>

Code

👍🏻👍🏻👍🏻

Loading

Preview

<sc-button loading>Click Me</sc-button>
<sc-button loading type="primary">Click Me</sc-button>
<sc-button loading type="success">Click Me</sc-button>
<sc-button loading type="info">Click Me</sc-button>
<sc-button loading type="warning">Click Me</sc-button>
<sc-button loading type="danger">Click Me</sc-button>

Code

Click MeClick MeClick MeClick MeClick MeClick Me

Disabled

Preview

<sc-button disabled>Disabled</sc-button>
<sc-button disabled type="primary">Disabled</sc-button>
<sc-button disabled type="success">Disabled</sc-button>
<sc-button disabled type="info">Disabled</sc-button>
<sc-button disabled type="warning">Disabled</sc-button>
<sc-button disabled type="danger">Disabled</sc-button>

Code

DisabledDisabledDisabledDisabledDisabledDisabled

Component Codex

Properties

Property	Description	Type	Default
autofocus	Tells the browser to autofocus.	boolean
busy	Draws the button in a busy state.	boolean	false
caret	Draws the button with a caret for use with dropdowns, popovers, etc.	boolean	false
circle	Draws a circle button.	boolean	false
disabled	Disables the button.	boolean	false
download	Tells the browser to download the linked file as this filename. Only used when `href` is set.	string
full	Draws the button full-width.	boolean	false
href	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.	string
loading	Draws the button in a loading state.	boolean	false
name	An optional name for the button. Ignored when `href` is set.	string
outline	Draws an outlined button.	boolean	false
pill	Draws a pill-style button with rounded edges.	boolean	false
size	The button's size.	"large" | "medium" | "small"	'medium'
submit	Indicates if activating the button should submit the form. Ignored when `href` is set.	boolean	false
target	Tells the browser where to open the link. Only used when `href` is set.	"_blank" | "_parent" | "_self" | "_top"
type	The button's type.	"danger" | "default" | "info" | "link" | "primary" | "success" | "text" | "warning"	'default'
value	An optional value for the button. Ignored when `href` is set.	string

Events

Event	Description	Type
scBlur	Emitted when the button loses focus.	CustomEvent<void>
scFocus	Emitted when the button gains focus.	CustomEvent<void>

Shadow Parts

Part	Description
base	The elements base wrapper.
caret	The button caret.
label	The button label.
prefix	The button prefix.
spinner	The button spinner.
suffix	The button suffix.

Used By

• sc-cancel-dialog
• sc-cancel-discount
• sc-cancel-survey
• sc-cart-form-submit
• sc-charges-list
• sc-checkout-stock-alert
• sc-checkout-test-complete
• sc-coupon-form
• sc-customer-details
• sc-customer-edit
• sc-dialog
• sc-donation-choices
• sc-downloads-list
• sc-invoices-list
• sc-license
• sc-licenses-list
• sc-login-form
• sc-login-provider
• sc-mollie-add-method
• sc-order
• sc-order-confirm-provider
• sc-order-submit
• sc-orders-list
• sc-pagination
• sc-password-nag
• sc-payment-method
• sc-payment-method-details
• sc-payment-methods-list
• sc-paystack-add-method
• sc-product-item-list
• sc-product-price-modal
• sc-product-selected-price
• sc-purchase-downloads-list
• sc-rich-text
• sc-stripe-add-method
• sc-subscription
• sc-subscription-ad-hoc-confirm
• sc-subscription-cancel
• sc-subscription-payment
• sc-subscription-payment-method
• sc-subscription-reactivate
• sc-subscription-switch
• sc-subscription-variation-confirm
• sc-subscriptions-list
• sc-tax-id-input
• sc-upcoming-invoice
• sc-upgrade-required
• sc-upsell
• sc-wordpress-password-edit
• sc-wordpress-user
• sc-wordpress-user-edit

Uses

• sc-spinner