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

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
Button Link

API

Button API <i-button>
Property Description Type Accepted Default
active Sets the button component state as active. Boolean true, false false
block Sets the button component style to span the whole parent width. Boolean true, false false
circle Sets the button component style to be a circle. Boolean true, false false
disabled Sets the button component state as disabled. Boolean true, false false
href Treats the button component as an anchor. String
link Sets the button component style to be a plain link. Boolean true, false false
loading Sets the button loading state. To be used together with the loading slot. Boolean true, false false
outline Sets the button component style to be an outline. Boolean true, false false
size Sets the size of the button component. String sm, md, lg md
tag Sets the tag used to render the button component. String a, button, input button
to Treats the button component as a router-link. Object
variant Sets the color variant of the button component. String primary, secondary, light, dark, success, danger, warning, info light