@dinefy/react-button

Dinefy React Web UI - button component with comprehensive CSS reset

Installation

npm install @dinefy/react-button

Usage

Basic Usage

import { Button } from "@dinefy/react-button";

function MyComponent() {
  return (
    <Button.Root variant="primary" size="md">
      Click me
    </Button.Root>
  );
}

With Icons

import { Button } from "@dinefy/react-button";
import { Plus } from "lucide-react";

<Button.Root variant="primary">
  <Button.Icon icon={Plus} />
  <Button.Value>Add Item</Button.Value>
</Button.Root>

Loading State

<Button.Root variant="primary" isLoading>
  Save Changes
</Button.Root>

// Custom spinner
<Button.Root variant="primary" isLoading>
  <Button.Spinner />
  <Button.Value>Processing...</Button.Value>
</Button.Root>

API

Button.Root

• variant: "primary" | "secondary" | "tertiary" | "secondaryGhost" | "tertiaryGhost" | "danger"
• size: "xs" | "sm" | "md" | "lg" | "xl"
• isLoading: boolean
• isFull: boolean (full width)
• children: ReactNode

Button.Icon

• icon: Lucide React icon component
• size?: number | string (applies width/height; defaults based on button size)

Button.Value

Text content wrapper for better semantic structure.

Button.Spinner

Loading spinner component that automatically matches button size.

CSS Reset

Este componente inclui um reset CSS específico que garante consistência visual independentemente do navegador ou contexto.

Características do Reset

• Normalização completa de elementos button
• Consistência cross-browser garantida
• Acessibilidade preservada
• Performance otimizada via CSS-in-JS

O que é resetado

• Box model (margin, padding, border, outline)
• Aparência (appearance, background, box-shadow)
• Tipografia (herda do elemento pai)
• Estados (focus, hover, active, disabled)
• User selection e touch behaviors
• Firefox-specific button styles (::-moz-focus-inner)

Implementação Automática

import { Button } from "@dinefy/react-button";
// Reset CSS é aplicado automaticamente

Dependencies

This component requires:

• @dinefy/theme-web
• @dinefy/tokens-default