Button

A user clicking on the "Button" component triggers an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

It also can be render as an anchor, to navigate between pages, when you use the href prop.

Edit

Install

The button component is contained in the @cypress-design/react-button package. You'll also want to install @cypress-design/constants-button to get proper types for TypeScript.

bash

npm install @cypress-design/vue-button @cypress-design/constants-button

or with yarn

bash

yarn add @cypress-design/vue-button @cypress-design/constants-button

Usage

import Button from '@cypress-design/vue-button'

Square buttons

Possible variants

Variants and their available sizes plus styles when disabled is set to true (represented as 🚫).

<template>
  <div class="flex flex-wrap justify-stretch gap-[8px]">
    <div
      v-for="(_, variant) in VariantClassesTable"
      class="p-[8px] py-[12px] flex flex-col items-center gap-[16px] rounded min-w-[180px]"
      :class="{
        'bg-gray-1000 text-white':
          variant === 'outline-dark' ||
          variant === 'outline-red-dark-mode' ||
          variant === 'outline-jade-dark-mode' ||
          variant === 'outline-indigo-dark-mode' ||
          variant === 'outline-purple-dark-mode' ||
          variant === 'red-dark-mode' ||
          variant === 'indigo-dark-mode' ||
          variant === 'disabled-dark-mode',
        'bg-white text-gray-900': ![
          'outline-dark',
          'outline-red-dark-mode',
          'outline-jade-dark-mode',
          'outline-indigo-dark-mode',
          'outline-purple-dark-mode',
          'red-dark-mode',
          'indigo-dark-mode',
          'disabled-dark-mode',
        ].includes(variant),
      }"
    >
      {{ variant }}
      <div
        class="flex gap-[8px] items-center"
        v-for="(_, size) in SizeClassesTable"
      >
        {{ size }}
        <Button :variant="variant" :size="size"> Button </Button>
      </div>
      <div class="flex gap-[8px] items-center">
        🚫
        <Button :variant="variant" :size="48" disabled="true"> Button </Button>
      </div>
    </div>
  </div>
</template>

Props

type

type "button" | "submit" | "reset"

variant

type

"link" | "white" | "disabled" | "disabled-dark-mode" | "outline-indigo" | "outline-purple" | "outline-teal-dark" | "outline-jade-light" | "outline-jade-dark" | "outline-red" | "outline-gray-dark" | ...

size

type "20" | "24" | "32" | "40" | "48"

disabled

type boolean

square

type boolean

href

type string

Events

click

vue

<Button
  @click="($event: MouseEvent) => { 
        // your code here
      }"
/>

Properties

$event

type: MouseEvent

Slots

default

The content of the button

Button ​

Install ​

Usage ​

Possible variants ​

Props ​

type ​

variant ​

size ​

disabled ​

square ​

href ​

Events ​

click ​

Properties ​

$event ​

Slots ​

default ​