salla-button
A styled button that renders a native button (wrapped in an a when href is set).
A styled button that renders a native <button> (wrapped in an <a> when href is set). Use it for any
button or button-style link in a theme so it shares the store's colors, sizes and loading state.
Attributes other than color, fill, size, width, id and enable-loader (for example class, aria-label,
data-*, onclick) are copied to the inner <button>.
Accessibility: if the button has no visible text and no aria-label or aria-labelledby, a
wishlist-style button (class contains wishlist) gets a default aria-label. An icon button (shape="icon")
without a label logs a console warning, so always give icon buttons an aria-label.
Use it
In HTML or JSX, use the tag <salla-button> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
This component has a native React version. Use it instead of the raw tag:
import { SallaButton } from '@salla.sa/twilight-components-react';Try it
Example
import { SallaButton } from '@salla.sa/twilight-components-react';
export function Example() {
return (
<SallaButton color="primary" fill="outline" size="large" loaderPosition="center">
Add to cart
</SallaButton>
);
}import { SallaButton } from '@salla.sa/twilight-components-react';
export function Example() {
return (
<SallaButton shape="icon" fill="none" ariaLabel="Close">
<i className="sicon-cancel"></i>
</SallaButton>
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
color | color | Button color. Allowed values: primary, success, warning, danger, light, gray, dark. | "danger" | "dark" | "gray" | "light" | "primary" | "success" | "warning" | 'primary' |
disabled | disabled | Is the button currently disabled | boolean | false |
enableLoader | enable-loader | Whether this button can ever show a loading state. Defaults to true; set to false to make the button ignore loading (and any load() calls) entirely, e.g. for buttons that shouldn't display an in-flight spinner. | boolean | true |
fill | fill | Button fill style. solid is filled, outline is a bordered button, none has no background or border. | "none" | "outline" | "solid" | 'solid' |
href | href | When set, the button is wrapped in an <a href> so it navigates like a normal link. | string | |
loaderPosition | loader-position | Where the loading spinner appears: start, end, after (after the text, the default) or center (the text is hidden while loading). Ignored for shape="icon", which always centers it. | "after" | "center" | "end" | "start" | 'after' |
loading | loading | Shows the loading spinner when true. Ignored when enable-loader is false. | boolean | false |
shape | shape | Button shape. btn is a normal button, link looks like a text link, icon is a compact icon-only button (its loader is always centered). | "btn" | "icon" | "link" | 'btn' |
size | size | Button size. Allowed values: small, medium, large. | "large" | "medium" | "small" | 'medium' |
type | type | Determines the type of the rendered button. By default, the type is set to "button," making it a general-purpose button. Setting type to "submit" makes the button behave as a submit button within a form, triggering form submission. Possible values for type include "button," "submit," "reset," and "menu.". Possible values and their usage are as follows: "button" (default, used for general button functionality), "reset" (resets form fields to their default values), and "menu" (represents a button that, when activated, displays a context menu). | string | "button" |
width | width | Button width. normal fits the content, wide makes the button full width. | "normal" | "wide" | 'normal' |
Methods
Call these on the element or a React ref.
disable() => Promise<HTMLElement>
Adds the disabled attribute to the host.
Returns Promise<HTMLElement>: A Promise that resolves to the host element.
enable() => Promise<HTMLElement>
Removes the disabled attribute from the host.
Returns Promise<HTMLElement>: A Promise that resolves to the host element.
load() => Promise<HTMLElement>
Starts the loading state by setting the loading attribute on the host (and hiding the text when loader-position is center).
Returns Promise<HTMLElement>: A Promise that resolves to the host element.
setText(html: string) => Promise<HTMLElement>
Replaces the content of the button with the given HTML and re-syncs the host aria-label onto the inner <button>.
| Parameter | Type | Description |
|---|---|---|
html | string | HTML string to set as the button content. |
Returns Promise<HTMLElement>: A Promise that resolves to the host element.
stop() => Promise<HTMLElement>
Stops the loading state by removing the loading attribute (and showing the text again when loader-position is center).
Returns Promise<HTMLElement>: A Promise that resolves to the host element.
Slots
| Slot | Description |
|---|---|
| (default) | The button content (text or icons). It is rendered inside span.s-button-text. |
Related
Used inside: <salla-add-product-button>, <salla-booking-field>, <salla-bottom-alert>, <salla-bought-together>, <salla-bullet-delivery>, <salla-cart-coupons>, <salla-cart-summary-card>, <salla-comment-form>, <salla-comment-item>, <salla-cookies-bar>, <salla-count-down>, <salla-custom-fields>, <salla-delivery-promise>, <salla-edit-order-button>, <salla-gift-card-redeem>, <salla-gifting>, <salla-localization-modal>, <salla-loyalty>, <salla-loyalty-exchange-product-card>, <salla-loyalty-panel>, <salla-loyalty-points-history>, <salla-loyalty-program>, <salla-map>, <salla-modal>, <salla-multiple-bundle-product-cart>, <salla-multiple-bundle-product-options-modal>, <salla-next-order-coupon>, <salla-offer-modal>, <salla-order-cancel>, <salla-order-details-options>, <salla-order-edit>, <salla-order-edit-item>, <salla-order-options-modal>, <salla-order-summary>, <salla-orders>, <salla-price-range>, <salla-product-availability>, <salla-product-card>, <salla-quick-order>, <salla-rating-modal>, <salla-rating-modal-v2>, <salla-review-order-item>, <salla-reviews-page>, <salla-reward-action>, <salla-reward-exchange>, <salla-scopes>, <salla-search>, <salla-social-share>, <salla-user-profile>, <salla-user-settings>, <salla-verified-review>, <salla-verify>, <salla-wallet>, <salla-wishlist-actions>.