@wecareu/button-gradient

Componente de botão com fundo gradiente do WeCareU Design System.

Instalação

npm install @wecareu/button-gradient @wecareu/theme @wecareu/tokens

Uso

import { ButtonGradient } from '@wecareu/button-gradient'

function MyComponent() {
  return (
    <ButtonGradient onPress={() => console.log('Pressionado!')}>
      Botão com Gradiente
    </ButtonGradient>
  )
}

Props

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | children | string | - | Texto do botão | | disabled | boolean | false | Se o botão está desabilitado | | onPress | () => void | - | Função chamada quando o botão é pressionado | | size | 'small' \| 'medium' \| 'large' | 'medium' | Tamanho do botão | | style | ViewStyle \| ViewStyle[] | - | Estilo customizado do container | | testID | string | - | ID para testes |

Tamanhos

• small: Botão pequeno com padding reduzido
• medium: Botão médio (padrão)
• large: Botão grande com padding aumentado

Gradiente

O botão usa um gradiente linear de 135° com as cores:

• Início: #BC4CF7 (Roxo)
• Fim: #7873EE (Azul)

Estados

• Normal: Gradiente roxo para azul
• Pressionado: Opacidade reduzida (0.8)
• Desabilitado: Gradiente cinza com opacidade reduzida (0.5)

Exemplos

Botão básico

<ButtonGradient onPress={handlePress}>
  Clique aqui
</ButtonGradient>

Botão desabilitado

<ButtonGradient disabled>
  Botão desabilitado
</ButtonGradient>

Botão com tamanho customizado

<ButtonGradient size="large">
  Botão grande
</ButtonGradient>

Botão com estilo customizado

<ButtonGradient 
  style={{ marginTop: 20, alignSelf: 'center' }}
  onPress={handlePress}
>
  Botão customizado
</ButtonGradient>

Dependências

• @wecareu/theme: Sistema de tema
• @wecareu/tokens: Tokens de design
• react: ^18.2.0
• react-native: ^0.74.0