# Alerts

<div align="left"><img src="https://4062709520-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La71Iy76rotlqbCOWoQ%2F-M7Nx36UCo8Nj24EyMYk%2F-M7Nz6xrW7v3-cTf9HDX%2Finline-alert.png?alt=media&#x26;token=6aa6287c-013a-4c7e-9f24-bffaf16eead8" alt=""></div>

No ExtensionHelper available but you just need to provide and "`extensions`" output parameter with the following JSON.&#x20;

Icons are sourced from [MDI icons](https://materialdesignicons.com/) and the options for border are `["top", "right", "bottom", "right"]` or you can omit it and there will not be a sided border.

## Verbose with defaults:&#x20;

```javascript
{
   "name":"displayAlert",
   "light": false,
   "inline":true,
   "text": "Lorem ipsum <a href='https://www.google.com' target='_blank'>dolor sit amet</a>",
   "color":"blue",
   "beforeAnswer":true,
   "icon":"asterisk",
   "elevation":2,
   "dense":false,
   "prominent":false,
   "border":"left",
   "outlined":false
} 
```

## Minimal config

```javascript
{
   "name":"displayAlert",
   "inline":true,
   "text": "Lorem ipsum <a href='https://www.google.com' target='_blank'>dolor sit amet</a>",
}
```

{% hint style="info" %}
If you place an anchor link in the text its color will be the primary color of your current Leopard theme. You can override that with a inline style tag on your anchor. Something like:

```javascript
<a href='https://www.google.com' style='color: pink' target='_blank'>dolor sit amet</a>
```

{% endhint %}