Chūshō

# Button

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

<CBtn>Submit</CBtn>

# Config

# defaultClass

  • type: string

Class applied to all CBtn components.

# disabledClass

  • type: string

Class applied to Btn when prop disabled is set to true.

# variants

  • type: object

Predefined set of styling variants.

For example:

{
  primary: 'bg-blue-500 text-white rounded',
  large: 'btn--large',
  block: 'w-full',
}

# API

Name Type Default Description
Props
href  string null

Make the button a link to the given location

to  string|object null

Use a router-link (or nuxt-link in a Nuxt app) 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'

In case the Btn is a button element, specify its type

variant  string ''

Customize the button appearance by applying one or multiple variants defined in the config (btn.variants). Multiple variants should be separated by a space.

Example: "primary large"

disabled  boolean false

Disable the button (doesn’t apply to links) and apply the associated class from the config (btn.disabledClass).

# Examples

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 (or nuxt-link in a Nuxt app, this will be detected automatically), 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 tag), it will not apply the type nor the disabled prop as they aren't valid attributes for such HTML tag.

# Type Submit

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

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

# With style variant

Apply one or multiple pre-defined styling variants (separated by a space) defined in the component config.

<CBtn variant="default medium">Click me</CBtn>

# Disabled

Just like a normal button, you can disabled 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 forwared to the main element.

<CBtn id="pick-color-btn" v-on:click="() => {}">
  Click me
</CBtn>

← Dialog →