Button

Inkline provides you with custom button styles with support for multiple sizes, states, and more.

Variants

Inkline includes several predefined button styles, each serving its own semantic purpose, with a few extra variants available for more control.

Button Variants

Button Type

The <i-button> component makes use of a <button> element markup behind the scenes. Therefore, you can assign a type to it, just like with the <button> element.

Button Type

If you need to change the <button> node used to render the component, you can use the tag property to change it.

Button Tag

Outline Style

Sometimes, buttons should not stand out so much. Replace the default modifier classes with the outline property to remove background images and colors on any button when not interacted with.

Button Outline

You can create link buttons that look the same as normal links. Link buttons will use the variant property to set the color of the link.

Link Button

Circle Style

Circle buttons are very common when working with icon actions. You can transform buttons into circles using the circle modifier. You're also able to use the size modifier to control the size of your circle buttons.

Circle Button

Sizes

You're able to use the size modifier to control the size of your buttons, using one of the available sizes: sm, md, and lg. The default size is set to md.

Button Sizes

Block

You can create block level buttons that span the full width of a parent by adding the block property.

Block Button

Button Icon

You can easily use the i-button component together with any icon component (i.e. FontAwesome, IcoMoon), including any of the list of icons of the i-icon component.

Button Icon

Active State

Buttons will appear pressed when active. You can force a button to have an active appearance with the active property (this will also include the aria-pressed="true" attribute).

Active Button State

Disabled State

You can make buttons look inactive or disabled by adding the disabled boolean property to an <i-button> element.

Disabled Button State

Loading State

You can add a loading state to the button by setting the loading boolean property to an <i-button> element.

By default, the button will display a standard Inkline loading spinner. You can provide custom loading state by providing a loading slot.

Loading Button State

Linking and Routing

Buttons will be automatically converted to link anchors <a> when providing a href property. You can also specify target and rel properties.

The <i-button> component is well integrated with the Vue Router plugin and will be converted to a <router-link> when using the to property.

Button Linking and Routing

Component API

Here you can find a list of the various customization options you can use for the button component as props, as well as available slots and events.

Button API

Sass Variables

Here you can find a list of the Sass variables you can use for the button components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

Button