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



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

A full-width banner that tells customers the store is under maintenance, with an icon, title, message and a link button.
It takes no props: the text and link come from the store's `maintenance_details` config
(`title`, `message`, `button_title`, `button_full_title`, `button_url`). On screens narrower than 768px
it shows `button_title`, otherwise `button_full_title`.
The close button hides the banner and it stays hidden for one hour (the time is kept in `salla.storage`).

## Use it [#use-it]

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

```tsx
import { SallaMaintenanceAlert } from '@salla.sa/twilight-components-react/maintenance-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 { SallaMaintenanceAlert } from '@salla.sa/twilight-components-react/maintenance-alert';

export function Example() {
  return (
    <SallaMaintenanceAlert />
  );
}
```

```html
<salla-maintenance-alert></salla-maintenance-alert>
```