EpToggleButton

Props

Name	Description	Type	Default
label	The label to display inside the button.	string	''
activeClass	The class to apply when the button is active.	string	''
disabled	If true, the button is disabled.	boolean	false
ariaLabel	The aria-label for accessibility.	string	''
size	The size of the button.	string	'default'

INFO

This component does not use events, slots.

Component Code

<template>
  <button
    :class="['ep-button ep-toggle-button', computedClasses]"
    :aria-label="ariaLabel || label"
    :disabled="disabled"
    @click="onClick"
  >
    <span
      v-if="icon"
      class="ep-toggle-button__icon"
    >
      icon span
    </span>
    <span
      v-if="label"
      class="ep-toggle-button__label"
    >
      {{ label }}
    </span>
  </button>
</template>

<script setup>
  import { computed } from 'vue'

  const model = defineModel({
    type: Boolean,
    default: false
  })

  const props = defineProps({
    /**
     * The label to display inside the button.
     */
    label: {
      type: String,
      default: '',
    },
    /**
     * The class to apply when the button is active.
     */
    activeClass: {
      type: String,
      default: ''
    },
    /**
     * If true, the button is disabled.
     */
    disabled: {
      type: Boolean,
      default: false,
    },
    /**
     * The aria-label for accessibility.
     */
    ariaLabel: {
      type: String,
      default: '',
    },
    /**
     * The size of the button.
     * @values small, default, large, xlarge
     */
    size: {
      type: String,
      default: 'default',
      validator: (value) => ['small', 'default', 'large', 'xlarge'].includes(value)
    },
  })

  function onClick() {
    if (props.disabled) return

    model.value = !model.value
  }

  const computedClasses = computed(() => ({
    [`ep-button--${props.size}`]: props.size !== 'default',
    [`${props.activeClass} ep-button--selected`]: model.value && !props.disabled,
    'ep-button--disabled': props.disabled,
  }))
</script>