# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.leapwallet.io/cosmos/elements/theming/advanced-customisations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.