---
name: Inline alert
route: /components/common/inline-alert
edit: false
---

import { Playground, Props } from 'docz'
import InlineAlert from './inline-alert'

# InlineAlert
**SUBCATEGORY:** Feedback

<hr />

## Inline alert
### Description
For communicating an important issue. They appear inline, near an issue that needs addressing. Inline alerts cannot be dismissed; they are removed by the system once the issue is resolved.

<Playground>
  <InlineAlert text="Alert text lede." description="Alert text description." />
</Playground>

**Success**

<Playground>
  <InlineAlert text="Alert text lede." description="Alert text description." variant='success' />
</Playground>

**Warning**

<Playground>
  <InlineAlert text="Alert text lede." description="Alert text description." variant='warning' />
</Playground>

**Error**

<Playground>
  <InlineAlert text="Alert text lede." description="Alert text description." variant='error' />
</Playground>

<hr />

## Properties
<Props of={InlineAlert} />