Sparkier Brand Guidelines

Exemple de code

import { Button } from '@/components/ui/button';
import { ArrowRight, Sparkles } from 'lucide-react';

export function MyComponent() {
  return (
    <div className="space-y-4">
      {/* Bouton par défaut pour le dashboard */}
      <Button>Bouton par défaut</Button>
      
      {/* Bouton secondaire avec animation */}
      <Button 
        variant="secondary" 
        size="lg"
        rightIcon={<ArrowRight />}
        iconAnimation="translate"
      >
        En savoir plus
      </Button>
      
      {/* Bouton destructif avec état de chargement */}
      <Button 
        variant="destructive" 
        isLoading={isSubmitting}
        fullWidth
      >
        Supprimer le compte
      </Button>
      
      {/* Bouton accent pour le marketing */}
      <Button 
        variant="accent"
        context="marketing"
        rightIcon={<Sparkles />}
        iconAnimation="scale"
      >
        Essayer Premium
      </Button>
    </div>
  );
}