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.
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.
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.
Link Variant
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.
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.
Button Icon
You can easily use the i-button
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 <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.
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