> This page is for Flowkit CSS Framework, version v1.
> 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  `Type Modifier` Button `Size Modifer` Button `Surface Modifier` Button

For example:

Button Secondary Button Primary On Accent Button

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

**Size Modifiers**

* Small Button
* Large Button
* Secondary Small Button

**Type Modifiers**

* Secondary Button

**Surface Modifiers: On Accent**

* Primary Button On Accent Button
* Secondary Button On Accent
* Primary Button On Accent Secondary
* Secondary Button On Accent Secondary
* Primary Button On Accent Tertiary
* Secondary Button On Accent Tertiary

**Surface Modifiers: On Inverse**

* Primary Button On Inverse
* Secondary Button 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                                   |
| ---------------- | --------------------------------------------- |
| Align Left       | Aligns buttons to the left (default)          |
| Align Center     | Aligns buttons to the center                  |
| Align Right      | Aligns buttons to the right                   |
| 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:**

* Small Text Button

**Type Modifiers:**

* Secondary Text Button

**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:**

* Small Text Link

**Type Modifiers:**

* Secondary Text Link

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