Vuetify: hg‐button (HgButtonComponent)

General

• primary, secondary, danger, success, and link variants:
  • Swap <hg-button> for <HgButtonComponent>.
  • Using full names makes it easier to track down references.
  • Because it's easier to use imported components in Vue 3 with Composition API single-file components, instead of registering the component globally, import it in each file it is used.
• icon variants:
  • Swap <hg-button> for <HgIconButtonComponent>.
• icon-input variant:
  • Swap <hg-button> for <HgIconButtonComponent> inside an icon slot on <v-text-field>.
• carousel and nav variants:
  • Stop using <hg-button>. Replace with appropriate built-in functionality of <v-carousel> or <v-nav-drawer>.

Conversion

variant="primary"

<HgButtonComponent>

variant="secondary"

<HgButtonComponent variant="secondary">

variant="danger"

<HgButtonComponent color="error">

variant="success"

<HgButtonComponent color="success">

variant="link"

<HgButtonComponent variant="link">

variant="link-danger"

<HgButtonComponent variant="link" color="error">

size="small"

<HgButtonComponent size="small">

variant="icon"

<HgIconButtonComponent icon="fa-bars" />

variant="icon-light"

<HgIconButtonComponent icon="fa-bars" />

Notes

• Using the inverse prop on <HgButtonComponent>, you can swap to an appearance that is suited for use on dark backgrounds.
• <HgIconButtonComponent> icons are white on dark backgrounds and black on light backgrounds by default.
• Consider simplifying <HgButtonComponent> declarations where appropriate:
  • Icons placed inside an <HgButtonComponent> can often be replaced with a prepend-icon or append-icon prop on <HgButtonComponent>.
  • Buttons that contain only text content can move that content into the text prop to turn the declaration into a self-closing tag ( <HgButtonComponent text="X" />).