Primary button
Primary buttons are used for the main call to action and therefore use it sparingly and selectively.
Secondary button
Secondary buttons can be used in conjunction with primary buttons to indicate that the button is of lower priority.
Confirmation button
Confirmation buttons are used for the final step in a process to indicate that an action is final and significant. For example, an “Order” button at the end of a checkout process.
Cancel button (Tertiary)
Outlined button
Buttons on coloured backgrounds should revert to the colourless theme and avoid interaction colours. See guidelines for Dark backgrounds. Set background="dark" for a basic button with an outline.
Small button
Small buttons are useful for pages and areas with limited space. They are both shorter and narrower in size in comparison to the standard button design. Small buttons also permit labels with icons, as shown below.
Icon-only button
In certain scenarios, typically on pages with limited space, a button without a label and only an icon can be used. In this case, the button is always square in shape.
Transparent button
Transparent buttons are ideal for icons (e.g., “Close” or tooltip toggles) or text with icons. Avoid confusing them with text links. Use theme="transparent" for single icons with enough click area. This theme works with text and icons or icons only, offering a clean, borderless design.
Button as a link
To get a link in button look, just add the href attribute with value.
Ensure to use the right semantic markup and avoid opening a new window, see link usability guidelines.
Submit
Since the <sdx-button /> is not a native HTML element, adding type="submit" won’t work. To make it submit the form, JavaScript has to be used. For example:
Loading button
See also the Guideline for inactive states
Button group
Buttons can be placed inside an <sdx-button-group> to define the layout, size and responsive behavior.
- responsive, responsive-fill and responsive-center: Right aligned and in reversed order.
- fill: Buttons are full width within a group.
- fullwidth: Each button uses 100% of the container. Just use it in smaller containers like cards.
- fixed: Avoid resizing the buttons.
- responsive-fill: A combination of "fill" and "responsive". On desktop the buttons have full width and on mobiles they are among each other.
- responsive-center: Behaves like "responsive" but on desktop the buttons are centred.
Inactive Button
In user experience design, inactive buttons should be used sparingly and deliberately, as they can be prone to frustrating users if a required action is unclear. Opt for alternative solutions like hiding unnecessary controls or adjusting process flows to reduce the need for disabling inputs.
If inactive buttons are unavoidable, ensure they are clearly distinguishable from active ones, provide meaningful feedback upon interaction, explaining why the action is unavailable, and transition clearly to an active state when conditions are met. Accessibility should always be considered, ensuring screen readers or other assistive technologies can interpret the button's state.