# Button

Uniformized button style for router-link, a or button elements.

# Config

The options below are to be set in the global configuration at the following location:

    components: {
        btn: {
            // ...

# class

Classes applied to the component root element, except when the prop bare is set to true. See styling components.

  • type: Array<String | Object> | Object | String | (props: Object) => {}
  • default: null

# Example

class({ variant, disabled }) {
    return ['btn', {
        'btn--default': !variant,
        'btn--primary': variant?.includes('primary'),
        'btn--block': variant?.includes('block'),
        'btn--disabled': disabled



Name Type Default Description
variant  string|array null

Useful when used in the component config class option, to style it conditionally. See styling components.

bare  boolean false

Disable class inheritance from the component config. See styling components.

href  string null

Make the button a link to the given URL.

to  RouteLocationRaw null

Use a router-link in the background, works juste like the router-link prop of the same name.

Note that you can also pass all other router-link props such as activeClass, replace, … See Vue router documentation for a complete list of available props.

type  string 'button'

Specifies the button type, does not apply when to or href props are used. Example: submit.

disabled  boolean false

Disable the button, does not apply when to or href props are used.

active  boolean false

Doesn’t influence the component behavior but allows to conditionally style an active button differently, just like the variant. It‘s used internally by some higher-order components such as CCollapseBtn.

# Examples

# Simplest

<CBtn>Click me</CBtn>

Transform the button tag into an a by providing the href prop.

<CBtn href="#">Click me</CBtn>

You can also make it a router-link, by providing the to prop. It works just like router-link prop of the same name.

<CBtn to="/">Go home</CBtn>


When a button is rendered as a link (i.e. an a element), it will not apply the type nor the disabled props as they aren’t valid attributes for this HTML element.

# Type Submit

Change the type of the button so it can trigger the submit of a form.

<CBtn type="submit">Click me</CBtn>

# Disabled

Just like a normal button, you can disable it.

<CBtn disabled>Click me</CBtn>


This prop has no effect when used in combination with either href or to props.

# Attributes and events

Any extra attribute or event listener will be forwarded to the main element.

<CBtn id="pick-color-btn" @click="() => {}">
  Click me