# 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 |
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 Note that you can also pass all other |
type | string | 'button' | Specifies the button type, does not apply when |
disabled | boolean | false | Disable the button, does not apply when |
# 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>