@wecareu/button-link

Componente de botão link para o sistema de design WeCareU.

Instalação

pnpm add @wecareu/button-link @wecareu/theme @wecareu/tokens

Uso Básico

import { ButtonLink } from '@wecareu/button-link';
import { ThemeProvider } from '@wecareu/theme';

function App() {
  return (
    <ThemeProvider>
      <ButtonLink 
        label="Clique aqui" 
        onPress={() => console.log('Link pressionado!')} 
      />
    </ThemeProvider>
  );
}

Variações

Layout Padrão (Full Width + Centralizado)

<ButtonLink 
  label="Link padrão" 
  onPress={() => {}} 
/>

Sem Largura Total

<ButtonLink 
  label="Link compacto" 
  fullWidth={false}
  onPress={() => {}} 
/>

Sem Centralização

<ButtonLink 
  label="Link alinhado à esquerda" 
  centered={false}
  onPress={() => {}} 
/>

Com Sublinhado

<ButtonLink 
  label="Link com sublinhado" 
  underline={true}
  onPress={() => {}} 
/>

Com Ícones

<ButtonLink 
  label="Link com ícone antes" 
  iconBefore="home"
  onPress={() => {}} 
/>

<ButtonLink 
  label="Link com ícone depois" 
  iconAfter="arrowRight"
  onPress={() => {}} 
/>

<ButtonLink 
  label="Link com ambos os ícones" 
  iconBefore="user"
  iconAfter="chevronRight"
  onPress={() => {}} 
/>

Customização de Estilo

Padding Vertical Customizado

<ButtonLink 
  label="Link com padding customizado" 
  style={{ paddingVertical: 12 }}
  onPress={() => {}} 
/>

Cores de Ícones

<ButtonLink 
  label="Link com ícone colorido" 
  iconAfter="arrowRight"
  iconColor="#FF6B6B"
  onPress={() => {}} 
/>

Tamanho de Ícones

<ButtonLink 
  label="Link com ícone maior" 
  iconAfter="arrowRight"
  iconSize={24}
  onPress={() => {}} 
/>

Estados

Disabled

<ButtonLink 
  label="Link desabilitado" 
  disabled={true} 
  onPress={() => {}} 
/>

Props

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | label | string | - | Texto do link (obrigatório) | | onPress | () => void | - | Função chamada ao pressionar | | centered | boolean | true | Se o conteúdo deve ser centralizado | | disabled | boolean | false | Desabilita o link | | fullWidth | boolean | true | Se o botão ocupa largura total | | iconAfter | IconName | - | Ícone a ser exibido após o texto | | iconBefore | IconName | - | Ícone a ser exibido antes do texto | | iconColor | string | - | Cor dos ícones (padrão: cor do texto) | | iconSize | number | - | Tamanho dos ícones (padrão: line-height) | | underline | boolean | false | Mostra sublinhado | | style | ViewStyle \| ViewStyle[] | - | Estilo personalizado (pode sobrescrever paddingVertical) | | textStyle | TextStyle \| TextStyle[] | - | Estilo do texto | | testID | string | - | ID para testes |

Padding Vertical Padrão

O componente tem paddingVertical: 4 por padrão, mas você pode sobrescrever via prop style:

<ButtonLink 
  label="Padding customizado" 
  style={{ paddingVertical: 8 }}
/>

Acessibilidade

O componente implementa as melhores práticas de acessibilidade:

• accessibilityRole="button"
• accessibilityState para estado disabled
• Suporte completo a leitores de tela
• Indicadores visuais claros para interação

Uso em Navegação

Embora o componente seja otimizado para React Native, ele funciona bem com bibliotecas de navegação:

import { useNavigation } from '@react-navigation/native';

function NavigationExample() {
  const navigation = useNavigation();
  
  return (
    <ButtonLink 
      label="Ir para Detalhes" 
      onPress={() => navigation.navigate('Details')} 
    />
  );
}