Buttons

Buttons should be used as primary and secondary calls-to-action that indicate the highest-priority calls-to-action on a page. They should be used for initiating task flows and applications, and other crucial actions. NOTE: If the CTA is meant for navigation, then use a link styled as a button.

Design System Guidelines

Standard Buttons

Block Buttons

Mini Buttons

Use within tables.

Dropdown Buttons

Used when there's more than one option to choose between for the intended action.

Multi-Select Dropdown Buttons

Used to select more than one option from a set. Each selection is applied when it's made (the dropdown automatically shuts). The number of active selections is appended to the end of the button label in the format "(#)" when at least one has been selected (this text is otherwise hidden). Webflow has no logic engine, so you would need to create interactions to change the button label when options are selected from the dropdown list

Screen Size (3)
Screen Size (3)

Split Buttons

Used when there is one command that users select most of the time and then several others that are secondary.

Button Styled as a Link

A button that visually resembles a link. Used to perform an action, such as Expand All, rather than navigate.

Toggle Buttons

Subscribe to emails:

Disabled Buttons

Add the "dds__disabled" class to any button that you want to be disabled ...

... although the following are currently simulated without the dds__disabled class.

Subscribe to emails: