---
title: "Export Button"
slug: "export-button"
updated: 2026-04-17T07:24:35Z
published: 2026-04-17T07:24:35Z
canonical: "learn.servitly.com/export-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.

# Export Button

Provides a global export button on the page. Users can click the button and select the data to be exported.

This control should generally be placed in the page [control bar template](/docs/views).

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

Referring to the previous image, the user, once the button is clicked, must select the dataset to be exported; in this case there are two widgets that can be exported.

If the export button is present on the page, all widgets will register their exports to it, instead of displaying the built-in export button.

### Template Syntax

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

```xml

            <div class="d-flex flex-wrap components-row justify-content-end">
            <export-button icon="export" label="Export"></export-button>
            </div>
        
```

## Component Reference

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

#### Export Button `&lt;export-button&gt;`

| *Icon* | The icon displayed inside the export button. **Name**: icon **Type**: STRING \| Optional `icon="fas fa-thermometer"` |
| --- | --- |
| *Label* | The label displayed inside the export button. **Name**: label **Type**: STRING \| Optional `label="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

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