Buttons

Buttons are used for actions for example in forms, or when adding a new element to a table. A page should only ever have one primary button. Choose the right button type for the importance of your action in relationship to other intactive elements on the same page.

Design Links

Open in Sketch Cloud

Open in Figma

@import 'node_modules/@hospitality-digital/design-system/css/components/button.css';

Primary

Use to indicate the main action a user should take in a specific flow or on an indivual page.

Secondary

For lower level actions which still require attention and should be immediately noticebable in a flow. For example: “Cancel”. Use also on pages where mutiple buttons have the same importance or where another UI Element is more important than the main action itself.

Tertiary

Default

Use for actions and links of low importance.

With Icon

Add an action icon to add more clarity to the label and to give the action itself more importance while not competing with primary or secondary buttons.