# salla-button (https://docs.salla.dev/twilight/react/web-components/salla-button)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 [#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:

```tsx
import { SallaButton } from '@salla.sa/twilight-components-react';
```

## Try it [#try-it]

<Demo name="web-components/salla-button" />

## Example [#example]

```tsx
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>
  );
}
```

```html
<salla-button color="primary" fill="outline" size="large" loader-position="center">
  Add to cart
</salla-button>
```

```tsx
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>
  );
}
```

```html
<salla-button shape="icon" fill="none" aria-label="Close">
  <i class="sicon-cancel"></i>
</salla-button>
```

## Properties [#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 [#methods]

Call these on the element or a React ref.

### `disable() => Promise<HTMLElement>` [#disable--promisehtmlelement]

Adds the `disabled` attribute to the host.

Returns `Promise<HTMLElement>`: A Promise that resolves to the host element.

### `enable() => Promise<HTMLElement>` [#enable--promisehtmlelement]

Removes the `disabled` attribute from the host.

Returns `Promise<HTMLElement>`: A Promise that resolves to the host element.

### `load() => Promise<HTMLElement>` [#load--promisehtmlelement]

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>` [#settexthtml-string--promisehtmlelement]

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>` [#stop--promisehtmlelement]

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 [#slots]

| Slot      | Description                                                                     |
| --------- | ------------------------------------------------------------------------------- |
| (default) | The button content (text or icons). It is rendered inside `span.s-button-text`. |

## Related [#related]

Used inside: [`<salla-add-product-button>`](https://docs.salla.dev/twilight/react/web-components/salla-add-product-button), [`<salla-booking-field>`](https://docs.salla.dev/twilight/react/web-components/salla-booking-field), [`<salla-bottom-alert>`](https://docs.salla.dev/twilight/react/web-components/salla-bottom-alert), [`<salla-bought-together>`](https://docs.salla.dev/twilight/react/web-components/salla-bought-together), [`<salla-bullet-delivery>`](https://docs.salla.dev/twilight/react/web-components/salla-bullet-delivery), [`<salla-cart-coupons>`](https://docs.salla.dev/twilight/react/web-components/salla-cart-coupons), [`<salla-cart-summary-card>`](https://docs.salla.dev/twilight/react/web-components/salla-cart-summary-card), [`<salla-comment-form>`](https://docs.salla.dev/twilight/react/web-components/salla-comment-form), [`<salla-comment-item>`](https://docs.salla.dev/twilight/react/web-components/salla-comment-item), [`<salla-cookies-bar>`](https://docs.salla.dev/twilight/react/web-components/salla-cookies-bar), [`<salla-count-down>`](https://docs.salla.dev/twilight/react/web-components/salla-count-down), [`<salla-custom-fields>`](https://docs.salla.dev/twilight/react/web-components/salla-custom-fields), [`<salla-delivery-promise>`](https://docs.salla.dev/twilight/react/web-components/salla-delivery-promise), [`<salla-edit-order-button>`](https://docs.salla.dev/twilight/react/web-components/salla-edit-order-button), [`<salla-gift-card-redeem>`](https://docs.salla.dev/twilight/react/web-components/salla-gift-card-redeem), [`<salla-gifting>`](https://docs.salla.dev/twilight/react/web-components/salla-gifting), [`<salla-localization-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-localization-modal), [`<salla-loyalty>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty), [`<salla-loyalty-exchange-product-card>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-exchange-product-card), [`<salla-loyalty-panel>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-panel), [`<salla-loyalty-points-history>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-points-history), [`<salla-loyalty-program>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-program), [`<salla-map>`](https://docs.salla.dev/twilight/react/web-components/salla-map), [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal), [`<salla-multiple-bundle-product-cart>`](https://docs.salla.dev/twilight/react/web-components/salla-multiple-bundle-product-cart), [`<salla-multiple-bundle-product-options-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-multiple-bundle-product-options-modal), [`<salla-next-order-coupon>`](https://docs.salla.dev/twilight/react/web-components/salla-next-order-coupon), [`<salla-offer-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-offer-modal), [`<salla-order-cancel>`](https://docs.salla.dev/twilight/react/web-components/salla-order-cancel), [`<salla-order-details-options>`](https://docs.salla.dev/twilight/react/web-components/salla-order-details-options), [`<salla-order-edit>`](https://docs.salla.dev/twilight/react/web-components/salla-order-edit), [`<salla-order-edit-item>`](https://docs.salla.dev/twilight/react/web-components/salla-order-edit-item), [`<salla-order-options-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-order-options-modal), [`<salla-order-summary>`](https://docs.salla.dev/twilight/react/web-components/salla-order-summary), [`<salla-orders>`](https://docs.salla.dev/twilight/react/web-components/salla-orders), [`<salla-price-range>`](https://docs.salla.dev/twilight/react/web-components/salla-price-range), [`<salla-product-availability>`](https://docs.salla.dev/twilight/react/web-components/salla-product-availability), [`<salla-product-card>`](https://docs.salla.dev/twilight/react/web-components/salla-product-card), [`<salla-quick-order>`](https://docs.salla.dev/twilight/react/web-components/salla-quick-order), [`<salla-rating-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-modal), [`<salla-rating-modal-v2>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-modal-v2), [`<salla-review-order-item>`](https://docs.salla.dev/twilight/react/web-components/salla-review-order-item), [`<salla-reviews-page>`](https://docs.salla.dev/twilight/react/web-components/salla-reviews-page), [`<salla-reward-action>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-action), [`<salla-reward-exchange>`](https://docs.salla.dev/twilight/react/web-components/salla-reward-exchange), [`<salla-scopes>`](https://docs.salla.dev/twilight/react/web-components/salla-scopes), [`<salla-search>`](https://docs.salla.dev/twilight/react/web-components/salla-search), [`<salla-social-share>`](https://docs.salla.dev/twilight/react/web-components/salla-social-share), [`<salla-user-profile>`](https://docs.salla.dev/twilight/react/web-components/salla-user-profile), [`<salla-user-settings>`](https://docs.salla.dev/twilight/react/web-components/salla-user-settings), [`<salla-verified-review>`](https://docs.salla.dev/twilight/react/web-components/salla-verified-review), [`<salla-verify>`](https://docs.salla.dev/twilight/react/web-components/salla-verify), [`<salla-wallet>`](https://docs.salla.dev/twilight/react/web-components/salla-wallet), [`<salla-wishlist-actions>`](https://docs.salla.dev/twilight/react/web-components/salla-wishlist-actions).