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:
KButtonis used to create
KRouterLinkis used to create Vue router
:toproperties. These compile into
KExternalLinkis used to create standard
<a>tags with an
We also provide:
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.
- 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
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
KButtonGroup component to add spacing between adjacent buttons.
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.
Buttons can also have drop-down menus. Currently this is implemented using the poorly-named
KDropdownMenu component, but this is subject to change.
KDropdownMenu does not work with the
- Border radius: 2px
- Elevation: 4dp
- Font size: 14px
- Icon size: 14px
- Text button padding: 8px 16px
- Icon button padding: 8px