Buttons are an element that can be added to your project layout and menu, and consists of three parts: the button container, the text content, and the icon content. Buttons may have Text, Icon, or both shown or hidden.

Button with text & icon content turned on.

Button with just icon content turned on.

Button with just text content turned on.

Adding buttons

From within the editor, select Button from the + menu in the top bar, or use the hotkey B.
Select a point in the project body by selecting between rows, click + dragging within, or selecting a point inside a column.

Button settings

While selecting a Button element, the right sidebar will display the available settings for styling the container as well as the text and icon within.

Position
Content
Sizing
Spacing
Text, Icon, Fill, Stroke

Button states

Buttons have a range of states that can be styled individually, or synced together. Both default and active have rest and hover states.

Default
Active
Rest
Hover

Settings within button states

Each state can have these settings altered independently from another, or synced together.

Text
Icon
Fill
Stroke

General Use

Buttons have a wide range of use. Here are common general uses:

File downloads

Setting On click » Download file is one of the most common uses for buttons. Tip: for downloading multiple files with one button you can upload a zip file.

Linking

Setting On click » Link to is a common use for making buttons into navigating elements in body and in menus.

Menu items

Building menus with buttons is a great way to create navigation items. Doing this allows for a wide range of styling, beyond regular text, such as hover and active states.

Advanced Use

Buttons can be used in creative ways to enhance a site’s navigation with larger visual impact.

A grid of buttons can be used to create a tiled grid linking to different sections of a site.

Pagination

Two side by side half width buttons can be used at the bottom of pages to link between pages

Related guides

Dropdown

Links

Files & Downloads

Buttons are flexible elements with visual impact that are used in various ways such as linking to file downloads and hyperlinking between pages.

Button Basics