IconButton

Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.

Button with icon and text

Add text to default <HcIconButton /> slot if you need a button with text and icon. Use iconName prop or prefix-icon slot to customize the icon

<template>
  <div class="flex justify-between">
    <HcIconButton type="primary">
      Primary
    </HcIconButton>

    <HcIconButton
      type="accent"
      icon-name="download"
    >
      Accent
    </HcIconButton>

    <HcIconButton
      type="default"
      icon-name="filter"
    >
      Default
    </HcIconButton>

    <HcIconButton
      type="delete"
      icon-name="bucket"
    >
      Delete
    </HcIconButton>

    <HcIconButton
      type="success"
      icon-name="download"
    >
      success
    </HcIconButton>
  </div>
</template>

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

Button with icon only

If you need a button with icon only you can use <HcIconButton /> component

<template>
  <div class="flex justify-between">
    <HcIconButton
      type="default"
      icon-name="settings"
    />
    <HcIconButton
      type="default"
      icon-name="download"
    />
    <HcIconButton
      type="default"
      icon-name="refresh"
    />
    <HcIconButton
      type="default"
      icon-name="plus"
    />
    <HcIconButton
      type="default"
      icon-name="filter"
    />
    <HcIconButton
      type="default"
      icon-name="edit"
    />
    <HcIconButton
      type="delete"
      icon-name="bucket"
    />
  </div>
</template>

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

Props

Property	Type	Values	Description	Default
type	String	primaryaccentdefaultdelete;	change the type of the component and change its style	primary
nativeType	String	submitresetbutton	set native html type for button tag	button
disabled	boolean	truefalse	whether component is disabled	false
loading	boolean	truefalse	add a loading animation to the input.	false
iconClass	String	String	set extra class to icon component
iconName	String	String	set custom icon	plus

Slots

Property	Type	Values	Description	Default
default		-	customize default content
prefix-icon		-	customize prefix icon content

Events

Property	Type	Values	Description	Default
click	Function	event - MouseEvent	triggers when click on button

IconButton #

Button with icon and text #

Button with icon only #

Props #

Slots #