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

# Button

Buttons are interactive elements that allow users to perform actions on objects, such as initiating tasks, progressing
through a workflow, or making edits, among other functions.

## Default Styling

By default, buttons use Qonto's branding and come in four variants:

* **Primary**: The main call-to-action button with prominent styling. Features a filled background and inverted font
  color.
* **Secondary**: Alternative action button with less emphasis than primary. Features a border and transparent background.
* **Tertiary**: Subtle action button for less important actions. Looks like a text link with an underline.
* **Ghost**: Minimal styling button that appears transparent, shows a subtle background on hover.

<img src="https://mintcdn.com/qonto-6237c309/5g3taSVWo_yYBcHH/api-reference/sdk-libraries/doc-pages/img/button-default.png?fit=max&auto=format&n=5g3taSVWo_yYBcHH&q=85&s=53a2d400f7c5b0b18f1451174cd9d308" alt="Default button styles" width="359" height="53" data-path="api-reference/sdk-libraries/doc-pages/img/button-default.png" />

## Customization Options

<Info>
  All customizable components are subject to being styled with [global CSS
  properties](./global-customizations) exposed by the Qonto Embed SDK. If no
  component-level style is applied by the SDK, the global styles will be used if
  they are defined.
</Info>

Buttons can be customized using the following CSS variables:

| CSS Variable                                            | Description & Accepted Values                                                             |
| ------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| `--qonto-embed-button-height`                           | Accepts any valid CSS height value (e.g., `40px`, `2.5em`).                               |
| `--qonto-embed-button-font-size`                        | Accepts any valid font size value (e.g., `14px`, `1em`).                                  |
| `--qonto-embed-button-font-weight`                      | Accepts any valid font weight (e.g., `400`, `bold`).                                      |
| `--qonto-embed-button-primary-font-color`               | Accepts any valid color value for primary button text (e.g., `#fff`, `rgb(255,255,255)`). |
| `--qonto-embed-button-primary-background-color`         | Accepts any valid background color for primary buttons.                                   |
| `--qonto-embed-button-primary-background-color-hover`   | Accepts any valid background color for primary buttons on hover.                          |
| `--qonto-embed-button-primary-border`                   | Accepts any valid CSS border value for primary buttons (e.g., `1px solid #ccc`).          |
| `--qonto-embed-button-secondary-font-color`             | Accepts any valid color value for secondary button text.                                  |
| `--qonto-embed-button-secondary-background-color`       | Accepts any valid background color for secondary buttons.                                 |
| `--qonto-embed-button-secondary-background-color-hover` | Accepts any valid background color for secondary buttons on hover.                        |
| `--qonto-embed-button-secondary-border`                 | Accepts any valid CSS border value for secondary buttons.                                 |
| `--qonto-embed-button-border-radius`                    | Accepts any valid border-radius value (e.g., `4px`, `8px`).                               |
| `--qonto-embed-button-ghost-font-color`                 | Accepts any valid color value for ghost button text.                                      |
| `--qonto-embed-button-ghost-background-color`           | Accepts any valid background color for ghost buttons.                                     |

<Info>
  Some aspects of the button can't be completely customized. For example,
  despite it is possible to define the background color of the buttons, the
  opacity on hover is controlled by the SDK.
</Info>

### Example

This example shows customized buttons that depart from the default Qonto styling:

```css theme={null}
:root {
  --qonto-embed-button-height: 40px;
  --qonto-embed-button-font-size: 14px;
  --qonto-embed-button-font-weight: 500;
  --qonto-embed-button-primary-font-color: #fff;
  --qonto-embed-button-primary-background-color: #0d62bc;
  --qonto-embed-button-primary-background-color-hover: #1e429f;
  --qonto-embed-button-primary-border: none;
  --qonto-embed-button-secondary-font-color: #1a56db;
  --qonto-embed-button-secondary-background-color: transparent;
  --qonto-embed-button-secondary-background-color-hover: #1e429f;
  --qonto-embed-button-secondary-border: 1px solid #1a56db;
  --qonto-embed-button-border-radius: 8px;
}
```

The result is buttons with increased height, rounded corners, and a blue color scheme that differs from Qonto's default styling:

<img src="https://mintcdn.com/qonto-6237c309/5g3taSVWo_yYBcHH/api-reference/sdk-libraries/doc-pages/img/button-customized.png?fit=max&auto=format&n=5g3taSVWo_yYBcHH&q=85&s=57912ed15db1a0ab551c83fa595c0751" alt="Customized button styles" width="359" height="53" data-path="api-reference/sdk-libraries/doc-pages/img/button-customized.png" />