Button

One of the core building blocks of an application. Buttons can represent actions, links, or routes within the application.

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.

HTML

<i-button color="primary">Primary</i-button>

<i-button color="secondary">Secondary</i-button>

<i-button color="success">Success</i-button>

<i-button color="danger">Danger</i-button>

<i-button color="warning">Warning</i-button>

<i-button color="info">Info</i-button>

<i-button color="light">Light</i-button>

<i-button color="dark">Dark</i-button>

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

Link Button

HTML

<i-button tag="a">Link Button</i-button>

<i-button tag="button" type="button">Button</i-button>

<i-button tag="button" type="submit">Submit Button</i-button>

<i-button tag="button" type="reset">Reset Button</i-button>

<i-button tag="input" type="button" value="Input">Input</i-button>

<i-button tag="input" type="submit" value="Submit Input">Submit Input</i-button>

<i-button tag="input" type="reset" value="Reset Input">Reset Input</i-button>

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.

HTML

<i-button outline color="primary">Primary</i-button>

<i-button outline color="secondary">Secondary</i-button>

<i-button outline color="success">Success</i-button>

<i-button outline color="danger">Danger</i-button>

<i-button outline color="warning">Warning</i-button>

<i-button outline color="info">Info</i-button>

<i-button outline color="light">Light</i-button>

<i-button outline color="dark">Dark</i-button>

Link Variant

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

HTML

<i-button link color="primary">Primary</i-button>

<i-button link color="secondary">Secondary</i-button>

<i-button link color="success">Success</i-button>

<i-button link color="danger">Danger</i-button>

<i-button link color="warning">Warning</i-button>

<i-button link color="info">Info</i-button>

<i-button link color="light">Light</i-button>

<i-button link color="dark">Dark</i-button>

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.

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.

HTML

<i-button color="facebook" block>Singin with Facebook</i-button>

<i-button color="google" block>Singin with Google</i-button>

<i-button color="twitter" block>Singin with Twitter</i-button>

<i-button color="github" block>Singin with GitHub</i-button>

Button Icon

You can easily use the i-button component together with any icon component (i.e. FontAwesome, IcoMoon), including the Icon Component.

HTML

<i-button>
    <i-icon name="ink-plus" class="_margin-right:1/2" />
    Button Icon
</i-button>

<i-button>
    Button Icon
    <i-icon name="ink-plus" class="_margin-left:1/2" />
</i-button>

<i-button>
    <i-icon name="ink-plus" class="_margin-right:1/2" />
    Button Icon
    <i-icon name="ink-plus" class="_margin-left:1/2" />
</i-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 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.

HTML

<i-button :loading="true">
    Disabled Default Button
</i-button>

<i-button :loading="true">
    Button
    <template #loading>
        <i-loader color="dark" class="_margin-right:1/2" />
        Loading
    </template>
</i-button>

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 also integrated with the Vue Router plugin and will be converted to a <router-link> or <nuxt-link> when using the to property.

Button Link Button Route

Configuration

Props

Use props to modify the component’s design and behavior.

Property
active
TypeBoolean
Defaultfalse
Description The active state of the button
Property
block
TypeBoolean
Defaultfalse
Description Display the button as a block, spanning the full container width
Property
circle
TypeBoolean
Defaultfalse
Description Display the button as a circle
Property
color
Type'primary' | 'success' | 'light' | 'dark' | 'info' | 'success' | 'warning' | 'danger' | 'facebook' | 'google' | 'twitter' | 'github'
Default'light'
Description The color variant of the button
Property
disabled
TypeBoolean
Defaultfalse
Description The disabled state of the button
Property
link
TypeBoolean
Defaultfalse
Description Display the button as a link
Property
loading
TypeBoolean
Defaultfalse
Description The loading state of the button
Property
outline
TypeBoolean
Defaultfalse
Description Display the button as an outline button
Property
tag
TypeString
Default'button'
Description Set the HTML tag to be used for rendering the button
Property
tabindex
TypeNumber | String
Default1
Description The tabindex of the button
Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the button

Slots

Use slots to insert custom content into well-defined component locations.

Property
default
Description Slot for default button content
Property
loading
Description Slot for button loading state

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

Property
----background
Valuecolor('light')
Description The background of the button component
Property
----background--hover
Valuecolor('light-55')
Description The background of the button component when hovered or focused
Property
----background--active
Valuecolor('light-60')
Description The background of the button component when active
Property
----border-top-color
Valuecolor('light-55')
Description The border top color of the button component
Property
----border-right-color
Valuecolor('light-55')
Description The border right color of the button component
Property
----border-bottom-color
Valuecolor('light-55')
Description The border bottom color of the button component
Property
----border-left-color
Valuecolor('light-55')
Description The border left color of the button component
Property
----border-color
Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
Description The border color of the button component
Property
----border-color--hover
Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
Description The border color of the button component when hovered or focused
Property
----border-style
Valuevar(--border-style)
Description The border style of the button component
Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the button component
Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the button component
Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the button component
Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the button component
Property
----border-width
Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
Description The border width of the button component
Property
----border-top-left-radius
Valuevar(--border-top-left-radius)
Description The border top left radius of the button component
Property
----border-top-right-radius
Valuevar(--border-top-right-radius)
Description The border top right radius of the button component
Property
----border-bottom-right-radius
Valuevar(--border-bottom-right-radius)
Description The border bottom right radius of the button component
Property
----border-bottom-left-radius
Valuevar(--border-bottom-left-radius)
Description The border bottom left radius of the button component
Property
----border-radius
Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
Description The border radius of the button component
Property
----box-shadow-offset-x
Valuevar(--box-shadow-offset-x)
Description The box shadow horizontal offset of the button component
Property
----box-shadow-offset-y
Valuevar(--box-shadow-offset-y)
Description The box shadow vertical offset of the button component
Property
----box-shadow-blur-radius
Valuevar(--box-shadow-blur-radius)
Description The box shadow blur radius of the button component
Property
----box-shadow-spread-radius
Valuevar(--box-shadow-spread-radius)
Description The box shadow spread radius of the button component
Property
----box-shadow-color
Valuevar(--box-shadow-color)
Description The box shadow spread radius of the button component
Property
----box-shadow
Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
Description The box shadow of the button component
Property
----color
Valuecontrast-color($color-light)
Description The color of the button component
Property
----font-size
Valuefont-size()
Description The font size of the button component
Property
----font-weight
Valuefont-weight('normal')
Description The font weight of the button component
Property
----line-height
Valuevar(--line-height)
Description The line height of the button component
Property
----padding-top
Valuecalc(var(--padding-top) / 2)
Description The padding top of the button component
Property
----padding-right
Valuevar(--padding-right)
Description The padding right of the button component
Property
----padding-bottom
Valuecalc(var(--padding-bottom) / 2)
Description The padding bottom of the button component
Property
----padding-left
Valuevar(--padding-left)
Description The padding left of the button component
Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the button component
Property
----block--margin
Valuespacing()
Description The margin of the button component when block
Property
----circle--size
Value42px
Description The size of the button component circle variant
Property
----link--color
Valuecolor('light')
Description The color of the button component link variant
Property
----link--color--active
Valuecolor('light-55')
Description The color of the button component link variant when active

Button

One of the core building blocks of an application. Buttons can represent actions, links, or routes within the application.

Color Variants

Size Variants

Button Type

Outline Variant

Link Variant

Circle Variant

Block Variant

Social Color Variants

Button Icon

Active State

Disabled State

Loading State

Linking and Routing

Configuration

Props

Slots

CSS Variables