Button

The buttons are a fundamental part of any project, with HopeKit you can add a button with a single line of code.

Basic Usage

The button have several themes: default, primary, outlined, danger, success

<template>
  <div class="grid grid-cols-4 gap-5">
    <HcButton type="default">
      Default
    </HcButton>
    <HcButton type="outlined">
      Outlined
    </HcButton>
    <HcButton type="primary">
      Primary
    </HcButton>
    <HcButton type="danger">
      Danger
    </HcButton>
    <HcButton type="success">
      Success
    </HcButton>
    <HcButton type="outlined-danger">
      Danger 2
    </HcButton>
  </div>
</template>

<script lang="ts" setup>
import { HcButton } from '@deeepvision/hope-component-kit';
</script>

Disabled

Change the state of the button to disabled with the disabled property, the property is a boolean so you can add it without any value.

<template>
  <div class="grid grid-cols-4 gap-5">
    <HcButton
      type="default"
      disabled
    >
      Default
    </HcButton>
    <HcButton
      type="outlined"
      disabled
    >
      Outlined
    </HcButton>
    <HcButton
      type="primary"
      disabled
    >
      Primary
    </HcButton>
    <HcButton
      type="danger"
      disabled
    >
      Danger
    </HcButton>
    <HcButton
      type="success"
      disabled
    >
      Success
    </HcButton>
    <HcButton
      type="outlined-danger"
      disabled
    >
      Danger 2
    </HcButton>
  </div>
</template>

<script lang="ts" setup>
import { HcButton } from '@deeepvision/hope-component-kit';
</script>

Loading Button

Click the button to load data, then the button displays a loading state.

Set loading attribute to true to display loading state.

<template>
  <div class="grid grid-cols-4 gap-5">
    <HcButton
      type="default"
      loading
    >
      Default
    </HcButton>
    <HcButton
      type="outlined"
      loading
    >
      Outlined
    </HcButton>
    <HcButton
      type="primary"
      loading
    >
      Primary
    </HcButton>
    <HcButton
      type="danger"
      loading
    >
      Danger
    </HcButton>
    <HcButton
      type="success"
      loading
    >
      Success
    </HcButton>
    <HcButton
      type="outlined-danger"
      loading
    >
      Danger 2
    </HcButton>
  </div>
</template>

<script lang="ts" setup>
import { HcButton } from '@deeepvision/hope-component-kit';
</script>

Inactive

Change the state of the button to inactive with the inactive property, the property is a boolean so you can add it without any value.

<template>
  <div class="grid grid-cols-4 gap-5">
    <HcButton
      type="default"
      inactive
    >
      Default
    </HcButton>
    <HcButton
      type="outlined"
      inactive
    >
      Outlined
    </HcButton>
    <HcButton
      type="primary"
      inactive
    >
      Primary
    </HcButton>
    <HcButton
      type="danger"
      inactive
    >
      Danger
    </HcButton>
    <HcButton
      type="success"
      inactive
    >
      Success
    </HcButton>
    <HcButton
      type="outlined-danger"
      inactive
    >
      Danger 2
    </HcButton>
  </div>
</template>

<script lang="ts" setup>
import { HcButton } from '@deeepvision/hope-component-kit';
</script>

Props

Property	Type	Values	Description	Default
type	String	primarydefaultoutlineddangersuccess	change the type of the component	primary
nativeType	String	submitresetbutton	set native html type for button tag
disabled	boolean	truefalse	whether component is disabled	false
loading	boolean	truefalse	add a loading animation to the input.	false
inactive	boolean	truefalse	determine if the component is inactive and change its style to that state.	false
content	String	String	button content

Slots

Property	Type	Values	Description	Default
default		event - MouseEvent	customize default content

Events

Property	Type	Values	Description	Default
click	Function		triggers when click on button

Button #

Basic Usage #

Disabled #

Loading Button #

Inactive #

Props #

Slots #

Events #