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



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

Shows a short inline message with an icon, in one of four colour variants.
Use it for notices inside a page, such as a warning above a form. It has no close button and is not dismissible.

## Use it [#use-it]

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

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

## Try it [#try-it]

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

## Example [#example]

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

export function Example() {
  return (
    <SallaAlert variant="warning" message="Only 2 items left in stock" />
  );
}
```

```html
<salla-alert variant="warning" message="Only 2 items left in stock"></salla-alert>
```

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

export function Example() {
  return (
    <SallaAlert variant="success" icon="none">Your changes were saved</SallaAlert>
  );
}
```

```html
<salla-alert variant="success" icon="none">Your changes were saved</salla-alert>
```

## Properties [#properties]

| Property  | Attribute | Description                                                                                                                  | Type                                                    | Default  |
| --------- | --------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | -------- |
| `icon`    | `icon`    | Icon to show: `info`, `success`, `warning` or `error`. Use `none` to hide the icon. Defaults to the icon matching `variant`. | `"error" \| "info" \| "none" \| "success" \| "warning"` |          |
| `message` | `message` | Text of the alert. Content placed inside the element is shown after it.                                                      | `string`                                                |          |
| `variant` | `variant` | Colour style of the alert: `info`, `success`, `warning` or `error`. Also used as the icon when `icon` is not set.            | `"error" \| "info" \| "success" \| "warning"`           | `'info'` |

## Slots [#slots]

| Slot      | Description                                                 |
| --------- | ----------------------------------------------------------- |
| (default) | Extra content shown after `message`, in the same text area. |