import { Meta, Canvas } from '@storybook/blocks'
import * as VBtnStories from './v-btn.stories'

<Meta title="Composants/Composants Vuetify/VBtn" />

<div className="header">
    <h1>VBtn</h1>
Ce composant utilise directement le composant natif `v-btn` de Vuetify avec les couleurs du thème actif du design system.
Pour l'API complète du composant, consulter la [documentation Vuetify](https://vuetifyjs.com/en/api/v-btn/#props).
</div>

## Primary

<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
  <Canvas of={VBtnStories.Primary} />
  <Canvas of={VBtnStories.PrimaryLoading} />
  <Canvas of={VBtnStories.PrimaryDisabled} />
</div>

## Secondary

<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
  <Canvas of={VBtnStories.Secondary} />
  <Canvas of={VBtnStories.SecondaryLoading} />
  <Canvas of={VBtnStories.SecondaryDisabled} />
</div>

## Tertiary

<div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', alignItems: 'center', padding: '24px' }}>
  <Canvas of={VBtnStories.Tertiary} />
  <Canvas of={VBtnStories.TertiaryLoading} />
  <Canvas of={VBtnStories.TertiaryDisabled} />
</div>

## Variants disponibles

- `elevated` – Bouton avec ombre (défaut)
- `outlined` – Fond transparent avec bordure
- `tonal` – Fond teinté de la couleur
- `text` – Sans fond ni bordure
- `plain` – Sans fond ni bordure, opacité réduite