# Cases: Button component

> The Case Button component lets reviewers trigger a Case Action, like editing fields or creating Reports, with configurable styling and visibility.

Source: https://help.withpersona.com/articles/49D6NMIIpG1IplZjGAwpmj/
Section: Cases > Features > Layout

## What is the Case Button component?

The **Case Button** is a Case component that can be added to a Case Template. Cases that are created from this Case Template provide reviewers with an an interactive element. When users click it, it can trigger a [Case Action](https://help.withpersona.com/articles/3QokSTOfV7ZC7hNDPQ5HnT/). You can also customize the component's appearance, function, and define logic that governs when it appears.

![ButtonModuleInCaseLibrary001.png](https://assets.withpersona.com/c_fill,q_auto,f_auto/help-center/articles/ButtonModuleInCaseLibrary001.png '1610x351')

A **Case Button** is often used to trigger Case Actions such as editing multiple fields on the Case or creating additional Reports.

## How do you add a Button component?

1. Navigate to the Dashboard, and click on **Cases > Templates**.
2. Find and click on the Case template you want to edit, or **Create** a new template.
3. Navigate to the **Tab** you want to add a Case component to. Click an empty space to view the Component Library.
4. In the right toolbar, search for ‘**Button**.’

   ![ButtonComponent001.png](https://assets.withpersona.com/c_fill,q_auto,f_auto/help-center/articles/ButtonComponent001.png '399x351')

5. Drag and drop the Button component into your Case Layout and reposition it by dragging it around.

   ![ButtonComponent002.png](https://assets.withpersona.com/c_fill,q_auto,f_auto/help-center/articles/ButtonComponent002.png '191x79')

6. Click on the **Button.** On the right toolbar, you can customize the Button component:
   1. Under **Settings > Name,** you can change the text displayed on the **Button.**
   2. Under **Settings > Action,** you can change the action the **Button** completes when clicked.

      ![ButtonComponent003.png](https://assets.withpersona.com/c_fill,q_auto,f_auto/help-center/articles/ButtonComponent003.png '378x383')

   3. Under **Styling**, you can set the **Button color**
      1. Default: The most common button style (Gray)
      2. Primary: To highlight important actions. (Blue)
      3. Critical: For actions that will delete data or be difficult to recover from. (Red)
   4. Under **Module Layout**, you can change:
      1. Dynamic height toggle: Module will grow or shrink to fit its contents.
      2. Visibility: Dynamically control whether the module is hidden. This is a toggle button that lets you set conditions for when the button should be displayed or hidden from view based on your requirements. You can read more about [Visibility Configuration](https://help.withpersona.com/articles/2Q9Z1rKNix3YYxUoEnFtLc/) here.

7. Click the **“Delete”** button if you want to remove the component from the Case Layout.

## Plans Explained

### Case Button component by plan

|                       | **Startup Program** | **Essential Plan** | **Growth Plan** | **Enterprise Plan** |
| --------------------- | ------------------- | ------------------ | --------------- | ------------------- |
| Case Button component | Available           | Available          | Available       | Available           |

[Learn more about pricing and plans](https://withpersona.com/pricing?utm_source=product&utm_medium=referral&utm_audience=a&utm_campaign=cm_gen_ds_hc-plan-table).