> For the complete documentation index, see [llms.txt](https://docs.leapwallet.io/cosmos/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.leapwallet.io/cosmos/elements/theming/advanced-customisations.md).

# Advanced Customisations

For use cases where you need even more customisability, we have added CSS classes to components that you may want to style.

{% hint style="info" %}
If you need any assistance with advanced customisations for Elements, feel free to reach out to <support+elements@leapwallet.io>.
{% endhint %}

***

For this, you'll need to use the primitive component's classes and the high-level components' classes. Let's go through them.

## Primitive Components

For a few components like buttons, you may want to style each variant so for that, we have added `v-variant-name` class on such elements.

### Button

Class - `leap-button`

Variants

* default
* secondary
* outline
* ghost
* link

### Action Button

Class - `leap-button`

Variants

* v-action-primary
* v-action-destructive
* v-action-attention

{% hint style="info" %}
Similarly, other components will have identifying classes attached to them, you can find them when you inspect the markup. You can use these to do further modifications.
{% endhint %}

***

## Swaps, IBCSwaps, IBCTransfer and FiatOnRamp Components

Here's are the classes for the Swaps component's elements. Using these along with the primitive components classes, you can style any elements you want.

{% hint style="info" %}
You can inspect the markup and for each major component there will be a class name that identifies it. You can use these classes to do further modifications.
{% endhint %}

<div align="left"><figure><img src="/files/ZkNPwntbtOpRBCJM1WCV" alt="" width="359"><figcaption></figcaption></figure></div>