> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/alert.md).

# Alert

The `Alert` component displays a callout for user attention with optional `title`, `description`, `icon`, and `button`. It supports different variants for various alert types.

{% hint style="info" %}
Renamed from Message in Gravity 12.
{% endhint %}

### Preview

<figure><img src="/files/HqeBsVh5q9yeAIJQw0oj" alt="Gravity alert component"><figcaption></figcaption></figure>

### Usage

```javascript
import { Alert } from 'components/lib';

function Component({ ...props }){

  return (
    <Alert
      title="Success!"
      description="Your operation was successful."
      variant="success"
      button={{ text: 'Okay', action: () => alert('You clicked me') }}
    />
  )
);
```

### Props

| Prop        | Description                                                  | Required | Value                               |
| ----------- | ------------------------------------------------------------ | -------- | ----------------------------------- |
| button      | [button](/gravity-web/components/button.md) object           | optional | object                              |
| className   | custom styles                                                | optional | SCSS or Tailwind object             |
| description | description text                                             | optional | string                              |
| icon        | override the variant [icon](/gravity-web/components/icon.md) | optional | string                              |
| title       | title text                                                   | optional | string                              |
| variant     | alert type                                                   | required | string (info/success/warning/error) |

### Example

```javascript
import { Alert } from 'components/lib';

function Example({ ...props }){

  return (
    <div>
      <Alert 
        title='Information'
        description='This is an info alert.'
        variant='info'
      />
      <Alert 
        title='Success'
        description='This is a success alert.'
        variant='success'
      />
      <Alert 
        title='Warning'
        description='This is a warning alert.'
        variant='warning'
      />
      <Alert 
        title='Error'
        description='This is an error alert.'
        variant='error'
      />
    </div>
  )
);

```

### Blank Slate Message

{% hint style="danger" %}
Depreciated in v12.
{% endhint %}

Blank slate messages are used when there is no data to display and prompts the user to take action.

```javascript
<BlankSlateMessage
 title='No items found'
 text='Would you like to create one?' 
 buttonText='Create Item' 
 action={ this.createItem } 
 marginLeft='2em'
/>
```

### Props

| Prop       | Description                       | Required | Value    |
| ---------- | --------------------------------- | -------- | -------- |
| action     | callback executed on button click | optional | function |
| buttonText | button label                      | optional | string   |
| marginLeft | offset the left margin            | optional | string   |
| marginTop  | offset the top margin             | optional | string   |
| text       | message body                      | required | string   |
| title      | message title                     | optional | string   |

### Notes

* The `Alert` component uses the [Icon](/gravity-web/components/icon.md) and [Button](/gravity-web/components/button.md) components.
* The `variant` prop determines the styling and default icon for the alert.
* Custom styles can be applied using the `className` prop.
* The `button` prop accepts an object with [button](/gravity-web/components/button.md) properties to render a button within the alert.
* For more details, refer to the [Shadcn Alert documentation.](https://ui.shadcn.com/docs/components/alert)