# 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="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2Fn5H7GTNSGzk7tazUe7og%2Falert.png?alt=media&#x26;token=ce127606-d430-481f-94b3-15e70a0bc8b9" 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](https://docs.usegravity.app/gravity-web/components/button) object           | optional | object                              |
| className   | custom styles                                                                        | optional | SCSS or Tailwind object             |
| description | description text                                                                     | optional | string                              |
| icon        | override the variant [icon](https://docs.usegravity.app/gravity-web/components/icon) | 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](https://docs.usegravity.app/gravity-web/components/icon) and [Button](https://docs.usegravity.app/gravity-web/components/button) 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](https://docs.usegravity.app/gravity-web/components/button) properties to render a button within the alert.
* For more details, refer to the [Shadcn Alert documentation.](https://ui.shadcn.com/docs/components/alert)