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.
<template>
<IButton>Button</IButton>
</template>
Inkline includes several predefined button colors, each serving its own semantic purpose, with a few extra color variants available for more control.
<template>
<IButton color="primary">Primary</IButton>
<IButton color="secondary">Secondary</IButton>
<IButton color="success">Success</IButton>
<IButton color="danger">Danger</IButton>
<IButton color="warning">Warning</IButton>
<IButton color="info">Info</IButton>
<IButton color="light">Light</IButton>
<IButton color="dark">Dark</IButton>
</template>
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.
<template>
<IButton size="sm">Small Button</IButton>
<IButton size="md">Medium Button</IButton>
<IButton size="lg">Large Button</IButton>
</template>
The <IButton> component creates a <button> element behind the scenes. Therefore, you can assign a type to it, just like with the <button> element.
<template>
<IButton type="button">Button</IButton>
<IButton type="submit">Submit</IButton>
<IButton type="reset">Reset</IButton>
</template>
If you need to change the <button> node used to render the component, you can use the tag property to change it.
<template>
<IButton tag="a">Link Button</IButton>
<IButton tag="button" type="button">Button</IButton>
<IButton tag="button" type="submit">Submit Button</IButton>
<IButton tag="button" type="reset">Reset Button</IButton>
<IButton tag="input" type="button" value="Input">Input</IButton>
<IButton tag="input" type="submit" value="Submit Input">Submit Input</IButton>
<IButton tag="input" type="reset" value="Reset Input">Reset Input</IButton>
</template>
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.
<template>
<IButton outline color="primary">Primary</IButton>
<IButton outline color="secondary">Secondary</IButton>
<IButton outline color="success">Success</IButton>
<IButton outline color="danger">Danger</IButton>
<IButton outline color="warning">Warning</IButton>
<IButton outline color="info">Info</IButton>
<IButton outline color="light">Light</IButton>
<IButton outline color="dark">Dark</IButton>
</template>
You can create link buttons that look like normal links. Use the color property to set the color of the link.
<template>
<IButton link color="primary">Primary</IButton>
<IButton link color="secondary">Secondary</IButton>
<IButton link color="success">Success</IButton>
<IButton link color="danger">Danger</IButton>
<IButton link color="warning">Warning</IButton>
<IButton link color="info">Info</IButton>
<IButton link color="light">Light</IButton>
<IButton link color="dark">Dark</IButton>
</template>
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.
<template>
<IButton circle size="sm">S</IButton>
<IButton circle>M</IButton>
<IButton circle size="lg">L</IButton>
</template>
You can create block level buttons that span the full width of a parent by adding the block property.
<template>
<IButton block>Block Button</IButton>
</template>
You can easily use the IButton component together with any icon component (i.e. FontAwesome, IcoMoon), including the Icon Component.
<template>
<IButton>
<template #icon>
<IIcon name="ink-plus" />
</template>
</IButton>
<IButton>
<template #icon>
<IIcon name="ink-plus" />
</template>
Button Icon
</IButton>
</template>
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).
<template>
<IButton active>Active Default Button</IButton>
<IButton active color="primary">Active Primary Button</IButton>
</template>
You can make buttons look inactive or disabled by adding the disabled boolean property.
<template>
<IButton disabled>Disabled Default Button</IButton>
<IButton disabled color="primary">Disabled Primary Button</IButton>
</template>
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.
<template>
<IButton :loading="true"> Default Button </IButton>
<IButton :loading="true">
Default Button
<template #loading> Loading... </template>
</IButton>
<IButton :loading="true" :show-loading-icon="false">
Default Button
<template #loading>
<ILoader color="primary" class="_margin-right:1/2" />
Loading with Custom Icon...
</template>
</IButton>
</template>
<script setup></script>
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.
<template>
<IButton href="https://inkline.io"> Button Link </IButton>
<IButton :to="{ path: '/docs/components/button' }"> Button Route </IButton>
</template>