Overview

#

Buttons use the <button> HTML tag and trigger an action on the current page. Links use the <a> HTML tag and navigate to a new URL.

Buttons and links are not visually distinguishable. Buttons can visually look like classic links, and links can visually look like classic buttons.

When the user would expect to use navigation history, right-click to copy a URL, or control-click to open a page in a new tab, then a link should be used. Otherwise, a button should be used.

As such, there are three components that all behave similarly, but are used for different purposes:

• KButton is used to create <button> tags with @click event handlers.
• KRouterLink is used to create Vue router <router-link> components with :to properties. These compile into <a> tags.
• KExternalLink is used to create standard <a> tags with an href attribute.

We also provide:

• a KButtonGroup wrapper component to set standardized spacing between groups of buttons.
• a KIconButton for smaller icon-and-tooltip buttons

Visual styles

#

There are 3 main appearances of button and link components. (Remember that a button component can visually look like a link, and a link component can visually look like a button.) Each appearance maps to a different level of visual hierarchy:

• Raised buttons: button-like appearance for more prominent actions
• Flat buttons: button-like appearance for less prominent actions
• Basic links: hyperlink-like appearance for deemphasized actions, or actions inline within text

Actions with a button-like appearance can also be primary or secondary. There should only be one primary button visible at a time, and it should be a common or default action.

Note that we don't have a "secondary basic link" style.

Buttons can also contain an icon. Based on the need, the icon can come either before or after the text. Icons should be used sparingly when it adds significant value to the meaning of the button.

Label text

#

• Labels should typically have a single word, or two at most, although there is an exception for links
• Avoid ambiguity; be specific about the action that will be performed. For example, use 'Save' instead of 'OK'
• Avoid commas and other punctuation

Placement

#

We have some conventions regarding placement of 'raised' and 'flat' buttons:

• Right-aligned at the bottom of modal pop-ups
• Left-aligned at the bottom of page forms
• Global actions related to full pages should be right-aligned and to the right of the page title on large screens, and left-aligned below the title on small screens. Use of KGrid is recommended

Use the KButtonGroup component to add spacing between adjacent buttons.

Icon buttons

#

Use KIconButton in situations where larger buttons with visible text would hinder the user experience. Use the flat secondary style unless the action should be highlighted.

A tooltip with the name of the action is required for an icon button.

Be sure to consider internationalization, translation, and cultural implications when choosing icons.

Dropdowns

#

Buttons can also have drop-down menus.

KDropdownMenu component can be added using #menu slot in either a KButton or a KIconButton.

For more guidance, see the KDropdownMenu component.

Visual specs

#