Apparence

Le TranscriptionButton accepte des props pour adapter son rendu visuel. Les options qui impactent le flux de transcription (intermédiaires, relecture) sont décrites dans Connexion et flux ; les presets dans Presets.

Props de style

Prop	Type	Défaut	Description
theme	`'light' \| 'dark'`	`'dark'`	Thème visuel du bouton (fond clair/sombre, couleur du logo).
variant	`'minimal' \| 'standard'`	`'minimal'`	`minimal` = icône seule ; `standard` = icône + barre de volume horizontale.
size	`'S' \| 'M' \| 'L'`	`'M'`	Taille du logo et de la barre (S, M, L).
logoSrc	`string`	`'/ephia_logo_light.svg'`	URL de l’image du logo (ou chemin vers une image personnalisée).
colors	`{ primary: string; secondary: string }`	—	Couleurs custom CSS. Si `theme="light"`, primary/secondary sont inversés automatiquement.

Variantes visuelles

Minimal (par défaut)

Icône seule, sans texte. Idéal pour une intégration discrète dans une interface existante.

Dark · M

Light · M

Dark · S

Dark · L

Standard

Icône + barre de volume horizontale. Donne un retour visuel sur l’activité audio en temps réel.

Dark · M · Standard

Light · M · Standard

Les captures d’écran réelles du rendu du bouton seront ajoutées prochainement. Les placeholders ci-dessus illustrent la structure visuelle.

Couleurs personnalisées

<TranscriptionButton
  token={token}
  endUserId="user-123"
  theme="dark"
  colors={{
    primary: '#3b82f6',
    secondary: '#1e40af',
  }}
/>

Exemple complet

<TranscriptionButton
  token={token}
  endUserId="user-123"
  theme="light"
  variant="standard"
  size="L"
  logoSrc="/mon-logo.svg"
/>

Les styles sont fournis par le fichier CSS du SDK (@ephia/transcribe-sdk/dist/styles.css). Ne pas inclure ce fichier entraîne un rendu incorrect du bouton.

Connexion et flux Presets