> For the complete documentation index, see [llms.txt](https://docs.whiteswan.io/partner-knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.whiteswan.io/partner-knowledge-base/branding-and-white-labeling/branding-and-design/buttons-and-links.md).
# Buttons & Links
Buttons & Links define all interactive elements—primary actions, secondary actions, and navigation links.
***
#### **Buttons**
You can style each type of button throughout the platform in your own way. The platform currently supports white labeling of 8 different types of buttons. These types include:
* Primary button
* Orange button
* Dark button
* Gradient button
* Outline button
* Destructive button
* White button
* Gray button
**Global Custom Button Font**
* You can set a custom font specifically for buttons, which will override global fonts
* Choose from free Google Fonts or upload your own font
* Button will always take on the bold variant of a font family
If uploading your own custom font:
* Supported font formats include woff2, woff, eot, svg, otf, and ttf. If possible, using woff2 fonts is optimal. There are free online converters for this such as [this one](https://fontsource.org/tools/converter)
* Make sure to upload both a regular and a bold version of your font. The bold and the regular font may or may not be a part of the same font family depending on your preferences.
* To easily find local fonts you can use Font Book on Macs and Fonts inside control panel on Windows.
For each type of button, you're able to customize:
**Styling Options**
* Background style - plain color, gradient, or transparent
* Background/gradient color
* Text color
* Border style (none, solid, dotted, dashed, groove, ridge, inset, outset)
* Border width (in px)
* Border roundness (in px)
{% hint style="info" %}
When you define a custom background or text color, we do a [WCAG color contrast check](https://accessibleweb.com/color-contrast-checker/), and you're only able to save the color if contrast is higher than 3:1.
{% endhint %}
**States**
* Normal state
* Hover state is customizable separately - simply toggle the hover toggle and customize any setting
* Darkmode is also customizable separately - select Yes for different style in darkmode and edit any settings while having either dark/light mode selected
**Shadows**
* Shadow blur (in px)
* X/Y offset (in px)
* Spread (in px)
* Hover multiplier (how shadow changes on hover) - 1 means that shadows are unchanged, and eg. 1.3 means that shadows are 30% stronger on hover.
**Typography**
* Custom font for the specific button - this is an optional override over both the global font and the global button font.
***
#### **Links**
**Link Styles**
* Normal link color
* Destructive link color
**Dark Mode**
* Separate colors for dark mode
**Typography**
* Optional custom font for links specifically.
***
#### Tips
* Keep **primary button highly visible** (this drives conversions)
* Use hover states to give subtle feedback (e.g., slightly darker or elevated)
* Ensure contrast ratios meet accessibility standards
* Wait a few seconds after making a change to see the results
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.whiteswan.io/partner-knowledge-base/branding-and-white-labeling/branding-and-design/buttons-and-links.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.