Go to main content
Go to KTH Intranet

Button

When to use this component

Use the button component to help users carry out an action, like starting an application or saving their information.

How it works

Write button text in sentence case, describing the action it performs. For example:

  • ‘Start now’ at the start of a service
  • ‘Sign in’ to an account a user has already created
  • ‘Continue’ when the service does not save a user’s information
  • ‘Save and continue’ when the service does save a user’s information

You may need to include more or different words to better describe the action. For example: ‘Add another address’.

Primary button

Use a primary button for the main call to action on a page.

Avoid using multiple default buttons on a single page. Having more than one main call to action reduces their impact, and makes it harder for users to know what to do next.

Code 
<button class="kth-button primary">Primary Button</button>
@use "@kth/style/scss/components/button.scss";

Success button

Use a success button for actions that the user has already initiated and should be encouraged to complete. For example: ‘Save the page’

Code 
<button class="kth-button success">Success Button</button>
@use "@kth/style/scss/components/button.scss";

Error button

Error buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.

Us an error button for actions that are destructive in nature and should be prevented from being carried out unintentionally. For example: ‘Delete this page’

Only use warning buttons for actions with serious destructive consequences that cannot be easily undone by a user. For example, permanently deleting an account.

Code 
<button class="kth-button error">Error Button</button>
@use "@kth/style/scss/components/button.scss";

Secondary button

Use a secondary button for secondary actions that users may perform but should not be actively encouraged.

Example 1: Use in confirmation dialogs where no selectable option is intentionally promoted.

Example 2: Use for ”cancel’ this action.

Code 
<button class="kth-button secondary">Secondary Button</button>
@use "@kth/style/scss/components/button.scss";

Back button

Code 
<button class="kth-button back">Back Button</button>
@use "@kth/style/scss/components/button.scss";

Icon button

Use an icon button in components that should be dismissible, such as modals.

Code 
<button class="kth-icon-button close">
  <span class="kth-visually-hidden">{"close"}</span>
</button>
@use "@kth/style/scss/components/button.scss";

Previous button

Use the previous button in a wizard to navigate to the previous step in the flow. For example: ”Go back.”

Code 
<button class="kth-button previous">Previous Button</button>
@use "@kth/style/scss/components/button.scss";

Next button

Use the next button in a wizard to navigate to the next step in the flow, for example: ”Go to the next page”

Code 
<button class="kth-button next">Next Button</button>
@use "@kth/style/scss/components/button.scss";