# Feedback indicators

# Alert

# Introduction

The CpAlert components is used to give feedback to the user about an action or state.

The Alert component can have a title and children. There are props to configure the icon and the border on the left.

Alert intent: info

The quick, brown fox jumps over a lazy dog.

Alert intent: success

The quick, brown fox jumps over a lazy dog.

Alert intent: warning

The quick, brown fox jumps over a lazy dog.

Alert intent: critical

The quick, brown fox jumps over a lazy dog.
<cp-alert intent="info" title="Alert intent: info">
  The quick, brown fox jumps over a lazy dog.
</cp-alert>
<cp-alert intent="success" title="Alert intent: success">
  The quick, brown fox jumps over a lazy dog.
</cp-alert>
<cp-alert intent="warning" title="Alert intent: warning">
  The quick, brown fox jumps over a lazy dog.
</cp-alert>
<cp-alert intent="critical" title="Alert intent: critical">
  The quick, brown fox jumps over a lazy dog.
</cp-alert>

# Alert without title

You can display a simple alert without specifying the title's props; it will keep only the lighter font-weight.

The quick, brown fox jumps over a lazy dog.
<cp-alert intent="info">
  The quick, brown fox jumps over a lazy dog.
</cp-alert>

# Closable alert

It's possible to display the close button using the is-closabled props, allowing the user to discard the alert.

Closable critical alert

The quick, brown fox jumps over a lazy dog.
<cp-alert intent="critical" title="Closable critical alert" is-closable>
  The quick, brown fox jumps over a lazy dog.
</cp-alert>

# CpAlert props

# :intent 'info' | 'success' | 'warning' | 'critical'

The intent of the alert. It will determine the color and the icon of the alert.

# :title string

Default is an empty string. This is the bold title of the alert.

# :is-closable bool = false

When true, show a remove icon button.