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.

If you need any assistance with advanced customisations for Elements, feel free to reach out to [email protected].

---

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

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.

---

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.

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.