@umain-works/ui

Biblioteca de componentes React do Umain Design System. Publicada no npmjs.com como pacote público.

Instalação

npm install @umain-works/ui

Requisitos: React 18 ou superior.

Utilização

Button

import { Button } from '@umain-works/ui';

export function Example() {
  return (
    <Button color="Primary" size="base" onClick={() => console.log('clicado')}>
      Entrar
    </Button>
  );
}

Props

| Prop | Tipo | Default | Descrição | |---|---|---|---| | color | ButtonColor | "Primary" | Variante de cor do botão | | size | ButtonSize | "base" | Tamanho do botão | | loading | boolean | false | Mostra spinner e desactiva o botão | | loadingIcon | ReactNode | — | Ícone personalizado para o estado de loading | | disabled | boolean | — | Desactiva o botão | | iconOnly | boolean | false | Modo icon-only (padding quadrado, sem gap) | | responsiveSize | boolean | false | Padding responsivo automático | | active | boolean | false | Estado activo (ex: botão toggle pressionado) | | squarePadding | boolean | false | Padding igual em todos os lados |

Aceita também todos os atributos nativos de <button> (onClick, type, aria-*, etc.).

Variantes de cor (ButtonColor)

| Valor | Descrição | |---|---| | Primary | Fundo azul primário, texto branco | | PrimaryWhite | Fundo branco, texto azul primário | | PrimaryTertiary | Fundo transparente, texto azul primário | | BlackWhite | Fundo transparente, texto escuro | | Black | Fundo preto, texto branco | | WhiteBordered | Fundo branco com borda | | BlackTertiary | Fundo transparente, texto escuro com hover azul |

Tamanhos (ButtonSize)

| Valor | Descrição | |---|---| | xxs | Extra extra pequeno | | xs | Extra pequeno | | sm | Pequeno | | base | Base (default) | | l | Grande |

Componentes disponíveis

| Componente | Versão | Descrição | |---|---|---| | Button | 0.0.1 | Botão com 7 variantes de cor, 5 tamanhos, estados loading/disabled/active |

Licença

MIT © Umain