Inkline provides you with custom button styles with support for multiple sizes, states, and more.
Inkline includes several predefined button styles, each serving its own semantic purpose, with a few extra variants available for more control.
<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
If you need to change the
<button> node used to render the component, you can use the
tag property to change it.
Sometimes, buttons should not stand out so much. Replace the default modifier classes with the
to remove background images and colors on any button when not interacted with.
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 buttons are very common when working with icon actions. You can transform buttons into circles using the
modifier. You're also able to use the
size modifier to control the size of your circle buttons.
You're able to use the
size modifier to control the size of your buttons, using one of the available sizes:
The default size is set to
You can create block level buttons that span the full width of a parent by adding the
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.
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
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).
You can make buttons look inactive or disabled by adding the
disabled boolean property to an
You can add a loading state to the button by setting the
loading boolean property to an
By default, the button will display a standard Inkline loading spinner. You can provide custom loading state by providing a
Linking and Routing
Buttons will be automatically converted to link anchors
<a> when providing a
href property. You can also specify
<i-button> component is well integrated with the Vue Router plugin and will be converted to a
<router-link> when using the
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.
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.