Nueva Handbook

# BaseButton

The BaseButton is a regular HTML button and can be used like one (has content slot). Attributes and event listeners can be attached as usual in Vue.js.

Example

TODO

# Dependencies

None.

# Props

None.

# Slots

  • 1 unnamed slot

# Variants

You can change the variant through the class attribute.

  • Primary (default)
  • Secondary: .c-base-button--secondary
  • Border Primary: .c-base-button--border-primary
  • Border Secondary: .c-base-button--border-secondary

# Example

Good

<BaseButton
  type="button"
  @click="doSomething"
>
  Button
</BaseButton>

<!-- Add variant class or any other class you want. -->
<BaseButton
  class="c-base-button--blue"
  type="button"
  @click="doSomething"
>
  Button
</BaseButton>

<form>
  <BaseButton type="submit">Submit</BaseButton>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Bad

<!-- BaseButton needs content, use the slot. -->
<BaseButton />

<!-- Add type="button" outside of a form. Default type is "submit" -->
<BaseButton>Toggle</BaseButton>
1
2
3
4
5

# TODO

  • Cleanup styles
  • Variants via prop or class?
  • Icon via prop? Icon variant?