# 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
    }]
}

# API

CBtn

Name	Type	Default	Description
Props
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>

# As link

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>

WARNING

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>

WARNING

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

← Alert Collapse →