@dams6464/button

Un composant React Button réutilisable (Design System) basé sur button-ds* avec 5 usages (conversion, primary, secondary, tertiary, link), plus un fichier CSS prêt à l’emploi pour les consommateurs “CSS classiques”.

Installation

npm i @dams6464/button

Import styles (une seule fois)

Le package expose un fichier précompilé via ./styles.css.

Pour une app Next.js / App Router (recommandé) :

// app/layout.tsx
import '@dams6464/button/styles.css';

Ensuite, utilisez simplement :

• button-ds
• button-ds--usage-conversion | button-ds--usage-primary | button-ds--usage-secondary | button-ds--usage-tertiary | button-ds--usage-link

Usage React

import { Button } from '@dams6464/button';

export function Example() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
      <Button usage="primary">Primary</Button>
      <Button usage="secondary">Secondary</Button>
      <Button usage="link">Link</Button>
      <Button usage="primary" isDisabled>
        Disabled
      </Button>
    </div>
  );
}

Icônes (embarquées dans le package)

Le package embarque la banque d'icônes du bouton. Tu peux utiliser directement la syntaxe :

import { Button, ButtonUsage, ButtonSize, IconType } from '@dams6464/button';

export function ExampleWithIcons() {
  return (
    <Button
      usage={ButtonUsage.PRIMARY}
      icons={{ right: IconType.ARROW_RIGHT }}
      buttonSize={ButtonSize.S}
    >
      Next
    </Button>
  );
}

Usage via constantes :

import { Button, ButtonUsage } from '@dams6464/button';

export function Example() {
  return <Button usage={ButtonUsage.PRIMARY}>Primary</Button>;
}

Usage CSS classique (sans React)

<link rel="stylesheet" href=".../node_modules/@dams6464/button/dist/styles.css" />

<button class="button-ds button-ds--usage-primary button-ds--size-M button-ds--color-white">
  Primary
</button>

Notes Tailwind CSS v4

Le CSS est précompilé dans le package (généré via PostCSS + Tailwind v4). Vous n’avez pas besoin d’ajouter @tailwindcss ni de config spécifique côté consommateur pour que les styles button-ds* fonctionnent.