Button

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.

<i-button>Button</i-button>

Color Variants

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

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

<i-button size="sm">Small Button</i-button>

<i-button size="md">Medium Button</i-button>

<i-button size="lg">Large Button</i-button>

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.

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

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

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

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

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

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

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

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

<i-button circle size="sm">S</i-button>

<i-button circle>M</i-button>

<i-button circle size="lg">L</i-button>

Block Variant

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

<i-button block>Block Button</i-button>

Social Color Variants

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.

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

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

<i-button active>Active Default Button</i-button>

<i-button active color="primary">Active Primary Button</i-button>

Disabled State

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

<i-button disabled>Disabled Default Button</i-button>

<i-button disabled color="primary">Disabled Primary Button</i-button>

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.

<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 
<i-button href="https://inkline.io">
    Button Link
</i-button>

<i-button :to="{ name: 'docs-components-button' }">
    Button Route
</i-button>

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