Button

Description

The component provides a button.

Connection

Use the .native modifier to call a method on a component.

<template>
  <section>
    <Button @click.native="click">>skin="primary"</Button>
    <Button skin="secondary">skin="secondary"</Button>
  
    <Button size="large">size="large"</Button>
    <Button size="small">size="small"</Button>
  
    <Button disabled>disabled</Button>
  
    <Button skin="secondary" wide>skin="secondary" wide</Button>
  </section>
</template>

<script>
export default {
  methods: {
    click() {},
  },
};
</script>

Render

Styles

~/src/stylus/utils/_variables.styl

$buttons = {
  height--large: 48px,
  height--normal: 40px,
  height--small: 24px,

  background--primary: $colors.primary,
  background--secondary: $colors.secondary,

  color--primary: $colors.stone,
  color--secondary: $colors.stone,
}

API

Props

Name	Type	Description	Default
link	String, null	Is button a link, url	null
skin	String: 'primary', 'secondary'	Button colors	'primary'
size	String: 'normal', 'large', 'small'	Button size	'normal'
type	String	type attr	'button'
disabled	Boolean	Is button disabled	false
wide	Boolean	Is button 100% width	false

Slots

Name	Description
default	Link text
icon	Slot for icon

Source code

@/src/components/Buttton/Button.vue

<template>
  <div class="button__wrapper" :class="wide && `button__wrapper--wide`">
    <button
      v-if="!link || link === ''"
      :type="type"
      class="button"
      :class="[
        `button--${skin}`,
        `button--${size}`,
        disabled && 'button--disabled',
        wide && 'button--wide',
      ]"
      :disabled="disabled"
      @click.prevent="click"
    >
      <div class="button__content">
        <slot name="icon" />
        <slot />
      </div>
    </button>

    <a
      v-else
      :href="link"
      :type="type"
      class="button"
      :class="[
        `button--${skin}`,
        `button--${size}`,
        disabled && `button--disabled`,
        wide && `button--wide`,
      ]"
      :disabled="disabled"
      @click.prevent="click"
    >
      <div class="button__content">
        <slot name="icon" />
        <slot />
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: 'Button',

  props: {
    link: {
      type: [String, null],
      required: false,
      default: null,
    },
    skin: {
      type: String,
      required: false,
      default: 'primary',
    },
    size: {
      type: String,
      required: false,
      default: 'normal',
    },
    type: {
      type: String,
      required: false,
      default: 'button',
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    wide: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
};
</script>

<style lang="stylus" scoped>
@import "~/src/stylus/_stylebase.styl";

a.button
  display inline-block

.button
  @extend $button

  &__wrapper
    display inline-block

    + .button__wrapper
      margin-left 8px

    &--wide
      display block

  &--primary
    background $buttons.background--primary
    color $buttons.color--primary

  &--primary:hover
    background lighten($buttons.background--primary, $effects.amount)

  &--primary:active
    background darken($buttons.background--primary, $effects.amount)

  &--secondary
    background $buttons.background--secondary
    color $buttons.color--secondary

  &--secondary:hover
    background lighten($buttons.background--secondary, $effects.amount)

  &--secondary:active
    background darken($buttons.background--secondary, $effects.amount)

  &--large
    height $buttons.height--large
    padding 10px 32px
    $text("alena")

  &--normal
    height $buttons.height--normal
    padding 6px 16px
    $text("natasha")

  &--small
    height $buttons.height--small
    padding 4px 8px
    $text("nina")
    $border-radius("dancing")

  &--large,
  &--normal
    $border-radius("swimming")

  &--wide
    width 100%

  &--disabled
    pointer-events none
    cursor default
    $opacity("psy")
</style>