Flowkit v2.0.0Components

Buttons

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:

ClassDescription
button-groupAligns buttons to the left (default)
button-group is-align-centerAligns buttons to the center
button-group is-align-rightAligns buttons to the right
button-group is-vertical-stretchStretches 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