---
title: "Add Button"
slug: "add-button"
updated: 2026-04-10T14:52:17Z
published: 2026-04-10T14:52:17Z
canonical: "learn.servitly.com/add-button"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add Button

Provides a global add button in the page.

![Add Button](https://components-manager.servitly.com/components/AddButton_1/IMAGES/_screenshot?owner=AG_Servitly)

In the presence of this component, the standard buttons embedded into other page widgets (e.g. Customer List) are discarded.

By using the "*floating-rounded-button*" CSS class, for mobile app you can display a button floating on the list bottom.

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(522).png)

## 

### Template Syntax

Below you can find some examples of how to use the component within a template.

```xml
<!-- Add thing button -->
            <add-button icon="add" label="Add Thing" resource="THING"></add-button>

            <!-- Add customer button floating on the page bottom for mobile apps -->
            <add-button icon="add" class="floating-rounded-button" label="" resource="CUSTOMER" *ngIf="isMobile()"></add-button>
        
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Add Button `&lt;add-button&gt;`

| *Icon* | The Angular Material icon displayed inside the add button (e.g. add). **Name**: icon **Type**: STRING \| Optional `icon="fas fa-thermometer"` |
| --- | --- |
| *Label* | The label displayed inside the add button. **Name**: label **Type**: STRING \| Optional `label="abc"` |
| *Resource* | The resource on which to create the new object. **Name**: resource **Type**: ENUM \| Required **Values**: *THING*, *LOCATION*, *CUSTOMER*, *PARTNER*, *TAG* **Default Value**: *THING* `resource="THING"` |
| *Tooltip* | The tooltip displayed over the add button. **Name**: tooltip **Type**: STRING \| Optional `tooltip="abc"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<add-button    
    resource="THING"
    label="abc"
    tooltip="abc"
    icon="fas fa-thermometer"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']"></add-button>
```