salla-bottom-alert

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 itCopy Anchor Link

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

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.

ExampleCopy Anchor Link

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" />
  );
}

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" />
  );
}

PropertiesCopy Anchor Link

RelatedCopy Anchor Link

Renders: <salla-drawer>, <salla-button>, <salla-loading>.