# Create a custom branding alert

## Overview

This page walks you through configuring the Alert component to display a custom message. We will dive into some styling settings.

The final result will look like this:

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Ft4AenX9xEnfjOz7fH673%2F2022-11-25_16-19-51.png?alt=media&#x26;token=bbc75356-c3bf-4680-bb06-d4f74422e3a4" alt=""><figcaption></figcaption></figure>

## Steps

### 1. Add the Alert component

* Drag the **Alert component** from the components list to our screen flow (located under the custom section)
* Enter an **API Name**. For example, *Alert*.

{% @arcade/embed flowId="2dAkH0SCi63UV5Xq0lE1" url="<https://app.arcade.software/share/2dAkH0SCi63UV5Xq0lE1>" %}

### 2. Configure the Alert component

* **Open the Component Builder** to access all settings
* Select the **variant: warning**
* Icon name: **utility:warning**
* Content: My warning message

{% @arcade/embed flowId="5umjq4z47rzTZuifOt46" url="<https://app.arcade.software/share/5umjq4z47rzTZuifOt46>" %}

### 3. Style the Alert component

* Go to the Style Panel
* Change the **Text Font Weight** to 700- Bold
* Change the **background color** to: #fcc003

{% @arcade/embed flowId="EziAXvlYMRoCWCWwZPIN" url="<https://app.arcade.software/share/EziAXvlYMRoCWCWwZPIN>" %}