> This page is for Flowkit CSS Framework, version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/flowkit/v2.0.0/llms.txt
> - v1: https://developers.webflow.com/flowkit/v1.0.0/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Buttons

> Buttons are reusable components used to trigger actions or link to other pages.

## Class Naming

Buttons are reusable components used to trigger actions or link to other pages. They follow a consistent class structure for color type, size, and placement.

The class naming convention is:

button is-secondary is-small on-accent-primary

For example:

button is-secondary on-accent-primary

These modifiers adjust button styling for contrast and visual clarity when buttons are placed over colored or dark backgrounds.

**Size Modifiers**

* button is-small
* button is-large

**Type Modifiers**

* button is-secondary

**Surface Modifiers: On Accent**

* button on-accent-primary
* button is-secondary on-accent-primary
* button on-accent-secondary
* button is-secondary on-accent-secondary
* button on-accent-tertiary
* button is-secondary on-accent-tertiary

**Surface Modifiers: On Inverse**

* button on-inverse
* button is-secondary on-inverse

## Button Group

Buttons should be wrapped in a parent element with the class  button-group to maintain vertical spacing and horizontal gaps between buttons. This helps enforce consistent layout and rhythm across UI elements.

You can further modify alignment and layout behavior using combo classes:

| Class                            | Description                                   |
| -------------------------------- | --------------------------------------------- |
| button-group                     | Aligns buttons to the left (default)          |
| button-group is-align-center     | Aligns buttons to the center                  |
| button-group is-align-right      | Aligns buttons to the right                   |
| button-group is-vertical-stretch | Stretches buttons to fill the container width |

---

## Text Button

Text Buttons are lightweight, inline-style buttons often used in navigation patterns, CTAs, or subtle interactions. They follow the same structure as standard buttons with color, size, and on-surface placement variations.

The base class is text-button

**Size Modifiers:**

* text-button is-small

**Type Modifiers:**

* text-button is-secondary

**Surface Modifiers:**

These combinations allow for subtle yet clear interactions across all background contexts.

* text-button on-inverse
* text-button on-accent-primary
* text-button on-accent-secondary
* text-button on-accent-tertiary

---

## Text Link

Text Links resemble hyperlinks and are meant for in-line use. They follow the same class structure logic as buttons and text buttons.

The base class is text-link

**Size Modifiers:**

* text-link is-small

**Type Modifiers:**

* text-link is-secondary

**Surface Modifiers:**

Text Links work well inside body copy, feature sections, or anywhere link-level interactions are required.

* text-link on-inverse
* text-link on-accent-primary
* text-link on-accent-secondary
* text-link on-accent-tertiary