Guide

Button

Easily create nice looking buttons, which come in different styles.

Usage

A standard button can be rendered with vk-button while an anchor with a button style by using vk-button-link components. It is also possible to render a button with a style of an anchor!

<vk-button></vk-button>
<vk-button disabled></vk-button>
<vk-button-link href></vk-button-link>

Link

Note If you are displaying a number of buttons in a row, you can add a top margin to them, when they stack on smaller viewports, by adding the Margin directive to their parent element.

Style modifiers

There are several style modifiers applied with the type prop.

Class Description
primary Indicates the primary action.
secondary Indicates an important action.
danger Indicates a dangerous or negative action.
text Applies an alternative, typographic style.
link Makes a <button> look like an <a> element.
<vk-button type="primary"></vk-button>

Size modifiers

Use the size prop to make the button small or large.

<vk-button size="small"></vk-button>
<vk-button size="large"></vk-button>

Width modifiers

Add the .uk-width-1-1 class from the UIkit Width component and the button will take up full width.

Group

To create a button group, use the vk-button-group component around the buttons.

<vk-button-group>
  <vk-button></vk-button>
  <vk-button></vk-button>
  <vk-button></vk-button>
</vk-button-group>

Button with dropdowns

A button can be used to trigger a dropdown menu from the Dropdown component.

<!-- the button toggling the dropdown -->
<vk-button></vk-button>
<vk-dropdown></vk-dropdown>

Button group with dropdowns

Use button groups to split buttons into a standard action on the left and a dropdown toggle on the right. Just wrap the toggling button and the drop or dropdown inside a <div> element and add the .uk-inline class from the UIkit Utility component.

<!-- a button group with a dropdown -->
<vk-button-group ref="group">
  <vk-button></vk-button>
  <div class="uk-inline">
    <!-- the button toggling the dropdown -->
    <vk-button></vk-button>
    <vk-dropdown mode="click" boundary="group" boundary-align></vk-dropdown>
  </div>
</vk-button-group>

Props

Name Type Default Description
active Boolean false Determines whether the button is active.
size String -- Determines the button size as small or large.
type String -- Determines the button style as primary, secondary, danger, text or link.

vk-button specific

Name Type Default Description
htmlType String button Determines the button native type button, submit or reset.