ChūshōButton #
Uniformized button style for router-link, a or button elements.
Usage #
See using components for detailed instructions.
import { CBtn } from 'chusho';
Config #
The options below are to be set in the global configuration at the following location:
{
components: {
btn: {
class: ({ href, to, type, disabled, active, variant }) => {},
},
},
}
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?.primary,
'btn--block': variant?.block,
'btn--disabled': disabled
}]
}
API #
| Name | Type | Default | Description |
|---|---|---|---|
| Props | |||
| variant | string|array|object | undefined | 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 |
| active | boolean | false | Doesn’t influence the component behavior but allows to conditionally style an active button differently, just like the |
Examples #
Simplest #
<CBtn>Click me</CBtn>
With variant #
<CBtn variant="secondary">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>