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



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

A notice bar with an icon, a message and an optional action button. It is mainly used to tell
visitors that a demo store is available for purchase, but it works as a general message bar too.
When the store config has a `store.template` object, it also shows a logo section, the price and
a "More Details" link; the `popup` type then opens a drawer with the template features, price
details and a buy button, loaded from the `/store/template` endpoint.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-bottom-alert>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

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

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

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

export function Example() {
  return (
    <SallaBottomAlert
      type="link"
      message="Free shipping on orders over 200 SAR"
      actionLabel="Shop now"
      actionUrl="/products" />
  );
}
```

```html
<salla-bottom-alert
  type="link"
  message="Free shipping on orders over 200 SAR"
  action-label="Shop now"
  action-url="/products"
></salla-bottom-alert>
```

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

export function Example() {
  return (
    <SallaBottomAlert type="banner" message="The store is closed for the holiday" />
  );
}
```

```html
<salla-bottom-alert type="banner" message="The store is closed for the holiday"></salla-bottom-alert>
```

## Properties [#properties]

| Property      | Attribute      | Description                                                                                                                                                                                                         | Type                            | Default   |
| ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | --------- |
| `actionLabel` | `action-label` | Button label - used when type is link and popup. Falls back to a default translated label.                                                                                                                          | `string`                        |           |
| `actionUrl`   | `action-url`   | Button url - used when type is link. The button navigates to it on click.                                                                                                                                           | `string`                        |           |
| `icon`        | `icon`         | Alert Icon class from salla icons library - ex: sicon-user. Falls back to a default info icon.                                                                                                                      | `string`                        |           |
| `message`     | `message`      | Alert Message. When empty, a default message is shown (a "store is available for purchase" text in the current language).                                                                                           | `string`                        |           |
| `type`        | `type`         | How the alert behaves: `link` shows an action button that navigates to `action-url`, `popup` (default) shows an action that opens the template details drawer, and `banner` shows the message only, with no action. | `"banner" \| "link" \| "popup"` | `'popup'` |

## Related [#related]

Renders: [`<salla-drawer>`](https://docs.salla.dev/twilight/react/web-components/salla-drawer), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-loading>`](https://docs.salla.dev/twilight/react/web-components/salla-loading).