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 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.

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

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.

Link Style

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.

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.

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.

Block

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

You can use variants for the most common social login buttons out of the box. The examples below make use of the block modifier to have them full-width.

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.

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).

Disabled State

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

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.

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.

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.

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.