Button

 Properties:

• Label
• Color
  • Primary
  • Secondary
  • Tertiary
• Icon (only valid in DSFR and Vuetify)

Shoelace

https://shoelace.style/components/button

<sl-button variant="default">Default</sl-button>
<sl-button variant="primary">Primary</sl-button>
<sl-button variant="success">Success</sl-button>
<sl-button variant="neutral">Neutral</sl-button>
<sl-button variant="warning">Warning</sl-button>
<sl-button variant="danger">Danger</sl-button>

vue-dsfr

Bouton - Button

Primary

<template>
  <DsfrButton
    :label="label"
    :secondary="secondary"
    :tertiary="tertiary"
    :disabled="disabled"
    :icon="icon"
    :size="size"
    :no-outline="noOutline"
    :icon-only="iconOnly"
    :icon-right="iconRight"
    @click="onClick"
  />
</template>

Vuetify

Buttons

<v-btn> Button </v-btn>

Variations should be created with Component Aliasing

import { createVuetify } from 'vuetifyjs'
import { VBtn } from 'vuetifyjs/components'

export createVuetify({
  aliases: {
    VBtnSecondary: VBtn,
    VBtnTertiary: VBtn,
  },
  defaults: {
    VBtn: {
      color: 'primary',
      variant: 'text',
    },
    VBtnSecondary: {
      color: 'secondary',
      variant: 'flat',
    },
    VBtnTertiary: {
      rounded: true,
      variant: 'plain',
    },
  },
})