Inkline provides you with custom button styles with support for multiple colors, sizes, states, and more. Buttons can represent actions, links, or routes within the application. Inkline provides out of the box support for all scenarios.

Color Variants

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

Size Variants

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 Type

The <IButton> component creates a <button> element 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 Variant

Sometimes, buttons should not stand out so much. Replace the default look and feel using the outline property to remove the background on any button unless you interact with it.

You can create link buttons that look like normal links. Use the color property to set the color of the link.

Circle Variant

Circle buttons are very common when working with icons. You can transform your button into a circle using the circle property. You're also able to use the size modifier to control the size of your circle buttons.

Block Variant

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

Button Icon

You can easily use the IButton component together with any icon component (i.e. FontAwesome, IcoMoon), including the 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 add the aria-pressed="true" accessibility attribute).

Disabled State

You can make buttons look inactive or disabled by adding the disabled boolean property.

Loading State

You can add a loading state to the button by setting the loading boolean property.

By default, the button will display a standard Inkline Loader Component. 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 <IButton> component is also integrated with the Vue Router plugin and will be converted to a <RouterLink> or <NuxtLink> when using the to property.




Design Tokens