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.
Default button styles

​
Customization Options

All customizable components are subject to being styled with global CSS properties 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.
Buttons can be customized using the following CSS variables:
CSS VariableDescription & Accepted Values
--qonto-embed-button-heightAccepts any valid CSS height value (e.g., 40px, 2.5em).
--qonto-embed-button-font-sizeAccepts any valid font size value (e.g., 14px, 1em).
--qonto-embed-button-font-weightAccepts any valid font weight (e.g., 400, bold).
--qonto-embed-button-primary-font-colorAccepts any valid color value for primary button text (e.g., #fff, rgb(255,255,255)).
--qonto-embed-button-primary-background-colorAccepts any valid background color for primary buttons.
--qonto-embed-button-primary-background-color-hoverAccepts any valid background color for primary buttons on hover.
--qonto-embed-button-primary-borderAccepts any valid CSS border value for primary buttons (e.g., 1px solid #ccc).
--qonto-embed-button-secondary-font-colorAccepts any valid color value for secondary button text.
--qonto-embed-button-secondary-background-colorAccepts any valid background color for secondary buttons.
--qonto-embed-button-secondary-background-color-hoverAccepts any valid background color for secondary buttons on hover.
--qonto-embed-button-secondary-borderAccepts any valid CSS border value for secondary buttons.
--qonto-embed-button-border-radiusAccepts any valid border-radius value (e.g., 4px, 8px).
--qonto-embed-button-ghost-font-colorAccepts any valid color value for ghost button text.
--qonto-embed-button-ghost-background-colorAccepts any valid background color for ghost buttons.
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.

​
Example

This example shows customized buttons that depart from the default Qonto styling: 
: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: Customized button styles