Button

Create a styled action or navigation control

The Button component creates a prominent clickable control for navigation or actions such as opening a Modal. It supports editable text, optional content drop zones, responsive sizing, and separate normal and hover styles.

How to Use Button

You’ll find Button under Content in the Components list.

1. Drag Button onto the page.
2. Edit its label directly on the page.
3. Set the destination in Link → To.
4. Configure text, background, border, and hover styles.
5. Optionally enable a Left or Right drop zone for an SVG, Image, or other small component.

Component Settings

Link

To sets the destination. Choose a page, resource, website, email address, phone number, anchor, or other supported link type.

Font and Text Styles

Show displays the button label and is enabled by default.

Use State to style Normal and Hover text independently:

• Color and Opacity — Default to Surface 50 at 100%.
• Text Shadow — Defaults to None.

General controls include Align, Family, Size, Weight, Spacing, Line Height, Case, Italic, and Underline. Alignment defaults to Centre, font to Body, size to Base, weight to 400, spacing and line height to Normal, and other styles to off.

Dropzone

Dropzone

• None — Uses text only. This is the default.
• Left — Adds a drop zone before the label.
• Right — Adds a drop zone after the label.

Spacing appears when a drop zone is enabled and defaults to theme spacing 2.

Background

Choose None, Static, or Hover. Hover is the default and provides separate Start and End styles. Background Style can be Color, Image, or Gradient. Image controls include position, size, repeat, and fetch priority; Gradient controls include type, direction, interpolation, colour stops, opacity, and stop positions.

Common Layout Structure for Buttons

Use a Flex component when you want to control a group of buttons:

1. Add a Container.
2. Add a Flex inside the Container.
3. Add two or more Buttons inside the Flex.

Centre-aligned Buttons inside a Flex component.

Set Flex Direction to Row, Justify to Centre, and Align Items to Centre.

Buttons use Auto left and right margins by default. When a Flex or Grid should control alignment and gaps, set each Button’s margins to 0. Changing Button padding does not reset its margins.

Accessibility

Use action-oriented labels that describe the result, such as “Download Guide” rather than “Click Here”. Keep visible hover and keyboard focus states, and do not place interactive components inside a linked Button.

Related Components

• Flex — Aligns and spaces groups of Buttons.
• Modal — Can be opened from a Button.
• SVG — Adds a custom icon through the Button drop zone.

Common Control	Description
Link	Link to a page, resource, anchor, email address, or website.
Layout	Control positioning, stacking, visibility, overflow, and isolation.
Sizing	Set width, height, and responsive size constraints.
Spacing	Add responsive margin and padding.
Typography & Text Styles	Control fonts, text spacing, decoration, colour, and semantic wrappers.
Backgrounds	Apply colour, image, gradient, SVG, video, and hover backgrounds.
Transitions	Choose what animates and set its timing curve, duration, and delay.
Effects	Apply shadows, opacity, and hover effects.
Filters	Apply blur, brightness, saturation, shadow, and backdrop effects.
Transforms	Scale, rotate, move, and skew components.
Borders	Set border style, colour, opacity, width, radius, and hover states.
Advanced	Add CSS classes and IDs, or change supported HTML tags.