# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/components/alert.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.