Home

Button

UsageDevelopment

About

A Button allows users to take an action. Riverty Design System offers a primary button, secondary button, and text button. They come in large and small sizes. They can have an icon left or right.

Anatomy

A Radio button consists of a:

  1. Background
  2. Label
  3. Border
  4. Icon left or right (optional)
Button primary anatomy. Button secondary anatomy.
Button secondary with left icon anatomy. Button secondary with right icon anatomy.

When to use

Do use a button when

  • Allowing users to take an action (e.g., Confirm or Cancel input, go to the next page or back to the previous page, or start a payment process).

When not to use

Do not use a Button when

  • Allowing users to select a choice. Use a Select component instead.
  • The action is subtle, there’s small space and the action can be easily communicated with a common icon. Use an Icon button instead.
  • The UI element non-interactive such as text or labels.

Variant usage

Primary button

A primary button is used for the main action on a page or screen. Generally, you would want to have just one primary button one a page or screen.

Primary button with the text Send login link.
Do use a Primary button if you’re in need of just one Call to Action.
Do

Secondary button with the text Send login link.
Don’t use a Secondary button if you’re in need of just one Call to Action.
Don’t

Secondary button

A secondary button is used for the alternative actions to the ones communicated in primary buttons, or just for less important supporting actions.

Secondary button with the text Cancel.
Do use a Secondary button for actions that are an alternative to the action in Primary buttons.
Do

Primary button with the text Cancel.
Don't use a Primary button for actions that are an alternative to the action in Primary buttons.
Don’t

Text button

A text button can be used to guide users to links or allow for low-emphasis and non-critical actions.

Text button with the text View details.
Do use a Text button for non-critical actions.
Do

Primary button with the text View details.
Don’t use a Primary button for non-critical actions.
Don’t

Sizes

Riverty Design System includes two sizes of a button:

  • Small (S): The height of a small button is 44px. The width of a small button depends on the length of the button label.
  • Large (L): The height of a large button is 48px. The width of a large button depends on the length of the button label.

If you need the button width to fill the width of the screen or page, for example on mobile, you can set the button width to fill in Figma. In code, we have added a variable to fill to container.

Color usage

The Button component has fixed colors. We suggest not to color the buttons in different colors, such as green or red but support your importance with for example icons and clear copies.

Primary button with bin icon and the text Delete account.
Do use an icon that supports explaining the action that happens when interacting with the button.
Do

Red button with the text Delete account.
Don’t use another color for the button.
Don’t

Best practices

Call to actions

Buttons labels should always clearly explain the action that will be taken when interacting with the button.

Primary button with the text Continue and secondary button with the text Cancel.
Do write the action which is also the result of clicking the button as a label.
Do

Primary button with the text OK and secondary button with the text NO.
Don’t use just “NO” to cancel or “OK” to confirm, since these are no actions.
Don’t

Button order

When you combine a Primary button and a Secondary button, the default order is Primary left, Secondary right. However, there are some exceptions. For example, if the Secondary button communicates a “Back” action. This generally feels more natural to have on the left side.

Primary button with the text Continue on the left and secondary button with the text Cancel on the right.
Do use Primary button left, Secondary button right.
Do

Secondary button with the text Cancel on the left and primary button with the text Continue on the right.
Don’t use Secondary button left, Primary button right.
Don’t

Secondary button with the text Back on the left and primary button with the text Next on the right.
Do use Secondary button left, Primary button right if the buttons communicate back/next actions.
Do

Primary button with the text Next on the left and secondary button with the text Back on the right.
Don’t use Primary button left, Secondary button right if the buttons communicate back/next actions.
Don’t

Buttons with icons

Icons can be added to the left side of the button to add value to users’ understanding of the call to action.

Primary button with bin icon and the text Delete account.
Do use icons to add value to the user’s understanding of the call to action.
Do

Primary button with circle exclamation mark icon and the text Delete account.
Don’t use icons that won’t help users understand the call to action.
Don’t

When you want to link users to a different resource outside or their context, you can use a Text button. If this button takes users outside of the app or website they’re currently at, we suggest to use an icon (arrow up right) on the right to indicate this.

Text button with the text Go to terms and conditions.
Do use a Text button to navigate users to another page or resource.
Do

Primary button with the text Go to terms and conditions.
Don’t use a Primary button to navigate users to another page or resource.
Don’t

Nesting components

A Button component is used in:

  • Dialog component
  • Popover component

A Button component uses:

  • Icon component

Resources