> 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 that require customisation of styles for certain elements in the components.

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="https://897927660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrOZ4nLnlAQp8G5goWQ1X%2Fuploads%2Fg4CQz3xx7eoiIWSC9WY5%2Fswaps-classes.jpg?alt=media&amp;token=d3bff177-3ea2-41e3-bc81-46e7bb1211fd" alt="" width="359"><figcaption></figcaption></figure></div>