Button

Primary button

Each screen(page or dialog) should contain a single prominent primary button for primary action. This high-emphasis button commands the most attention.

• Should always have an icon.
• Label should be understandable without looking at the icon.
• There should only be one primary action per page or dialog.
• Size “md” is the default and “lg” is used only in header.
• Label must be sentence case unless the word is a Funnel-specific product name.

Secondary buttons

A “Secondary” button should be used for supporting actions that are important but not the main focus. Used alongside or near a primary action.

• Could have an icon.
• Label should be understandable without looking at the icon.
• Label must be sentence case unless the word is a Funnel-specific product name.

Flat button

“Flat” buttons are used for inline or low-emphasis actions where visual weight should remain minimal yet noticeable. When multiple flat buttons appear together, use quiet buttons instead to avoid visual clutter.

• Could have an icon.
• Label should be understandable without looking at the icon.
• Label must be sentence case unless the word is a Funnel-specific product name.

Quiet button

Quiet button is used in non-critical, subtle actions that don’t require strong emphasis — often used in toolbars, settings, or secondary UI elements.

• Should always have an icon
• Label should be understandable without looking at the icon.
• Label must be sentence case unless the word is a Funnel-specific product name.

Danger buttons

“Danger” buttons may only be used for confirming a desctructive action.

Read more about confirming destructive actions in the Modals pattern.

• Use the word “remove” when there is a possibility to add the thing back again, for instance when you just remove the relationship between two entities.
• Use the word “delete” when the thing is gone forever, for instance when deleting a user completely.

Icon buttons

We have no specific type for icon buttons, but they are easy to make with the existing variants. Icon only buttons are preferred when more than two quiet buttons need to be used next to each other. A common use is for repetitive actions in lists and tables.

Icon only buttons:

• Should have a tooltip with label of the action. Make sure that this label is short and actionable in sentense case and not descriptive.
• Should be variant quiet.

Busy and disabled

To prevent clicks on a button use the disabled property.

• All button variants and sizes have their corresponding disabled states.
• When a button is disabled, it should have a tooltip explaining the reason.

When a button is clicked, to prevent multiple clicks and indicate that the button action is happening, use the busy property. This also disables the button.

Examples

Specifications

Properties

Slots