Skip to content

Latest commit

 

History

History
616 lines (528 loc) · 21.5 KB

button.md

File metadata and controls

616 lines (528 loc) · 21.5 KB
Raw

Button

Inkline provides you with custom button styles with support for multiple sizes, states, and more. { .lead }

Variants

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

Primary Secondary Success Danger Warning Info Light Dark 
<i-button variant="primary">Primary</i-button>
<i-button variant="secondary">Secondary</i-button>
<i-button variant="success">Success</i-button>
<i-button variant="danger">Danger</i-button>
<i-button variant="warning">Warning</i-button>
<i-button variant="info">Info</i-button>
<i-button variant="light">Light</i-button>
<i-button variant="dark">Dark</i-button>

Button Type

The <i-button> component makes use of a <button> element markup behind the scenes. Therefore, you can assign a type to it, just like with the <button> element.

Button Submit Reset 
<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.

Anchor
Button Submit Button Reset 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"></i-button>
<i-button tag="input" type="submit" value="Submit Input"></i-button>
<i-button tag="input" type="reset" value="Reset Input"></i-button>

Outline Style

Sometimes, buttons should not stand out so much. Replace the default modifier classes with the outline property to remove background images and colors on any button when not interacted with.

Primary Secondary Success Danger Warning Info Light Dark 
<i-button outline variant="primary">Primary</i-button>
<i-button outline variant="secondary">Secondary</i-button>
<i-button outline variant="success">Success</i-button>
<i-button outline variant="danger">Danger</i-button>
<i-button outline variant="warning">Warning</i-button>
<i-button outline variant="info">Info</i-button>
<i-button outline variant="light">Light</i-button>
<i-button outline variant="dark">Dark</i-button>

Link Style

You can create link buttons that look the same as normal links. Link buttons will use the variant property to set the color of the link.

Primary Secondary Success Danger Warning Info Light Dark 
<i-button link variant="primary">Primary</i-button>
<i-button link variant="secondary">Secondary</i-button>
<i-button link variant="success">Success</i-button>
<i-button link variant="danger">Danger</i-button>
<i-button link variant="warning">Warning</i-button>
<i-button link variant="info">Info</i-button>
<i-button link variant="light">Light</i-button>
<i-button link variant="dark">Dark</i-button>

Circle Style

Circle buttons are very common when working with icon actions. You can transform buttons into circles using the circle modifier. You're also able to use the size modifier to control the size of your circle buttons.

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

Sizes

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.

Small Button Medium Button Large Button 
<i-button size="sm">Small Button</i-button>
<i-button size="md">Medium Button</i-button>
<i-button size="lg">Large Button</i-button>

Block

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

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

Button Icon

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

Button Icon Button Icon Button Icon 
<i-button>
    <i-icon icon="home" class="_margin-right-1-2"></i-icon> Button Icon
</i-button>
<i-button>
    Button Icon <i-icon icon="home" class="_margin-left-1-2"></i-icon>
</i-button>
<i-button>
    <i-icon icon="home" class="_margin-right-1-2"></i-icon>
    Button Icon
    <i-icon icon="caret-down" class="_margin-left-1-2"></i-icon>
</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 include the aria-pressed="true" attribute).

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

Disabled State

You can make buttons look inactive or disabled by adding the disabled boolean property to an <i-button> element.

Disabled Default Button Disabled Primary Button 
<i-button active>Active Default Button</i-button>
<i-button active variant="primary">Active Primary Button</i-button>

Loading State

You can add a loading state to the button by setting the loading boolean property to an <i-button> element.

By default, the button will display a standard Inkline loading spinner. You can provide custom loading state by providing a loading slot.

Button Button Loading 
<i-button :loading="true">Disabled Default Button</i-button>
<i-button :loading="true">
   Button
   <template v-slot:loading>
       <i-loader size="auto" variant="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 well integrated with the Vue Router plugin and will be converted to a <router-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>

Component API

Here you can find a list of the various customization options you can use for the button component as props, as well as available slots and events.

active Sets the button component state as active. Boolean true, false false block Sets the button component style to span the whole parent width. Boolean true, false false circle Sets the button component style to be a circle. Boolean true, false false disabled Sets the button component state as disabled. Boolean true, false false href Treats the button component as an anchor. String link Sets the button component style to be a plain link. Boolean true, false false loading Sets the button loading state. To be used together with the loading slot. Boolean true, false false outline Sets the button component style to be an outline. Boolean true, false false size Sets the size of the button component. String sm, md, lg md tag Sets the tag used to render the button component. String a, button, input button to Treats the button component as a router-link. Object variant Sets the color variant of the button component. String primary, secondary, light, dark, success, danger, warning, info light default Slot for button default content. loading Slot for button loading state. click Emitted when button component is clicked. (event: Event) => {}

Sass Variables

Here you can find a list of the Sass variables you can use for the button components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

$button-font-size $font-size $button-font-weight $font-weight-normal $button-line-height $line-height $button-border-width $border-width $button-border-radius $border-radius $button-padding-base $spacer-1-2 $spacer $button-padding size-map($button-padding-base, $sizes, $size-multipliers) $button-circle-size-base $spacer * 1.6 + map_get($button-font-size, 'md') $button-circle-size size-map($button-circle-size-base, $sizes, $size-multipliers) $button-margin $spacer $button-darken-percentage-hover 5% $button-darken-percentage-active 12.5% $button-opacity-disabled-light 0.75 $button-opacity-disabled-dark 0.66 $button-link-color $link-color $button-link-disabled-color $text-muted $button-variants ('brand', 'monochrome', 'state', 'social') $button-variant-color-light $variant-color-light $button-variant-color-dark $variant-color-dark