@wecareu/button-close

Componente de botão de fechar redondo com ícone para o WeCareU Design System.

Instalação

npm install @wecareu/button-close
# ou
yarn add @wecareu/button-close

Uso

import React from 'react'
import { ButtonClose } from '@wecareu/button-close'

export function MyComponent() {
  const handleClose = () => {
    console.log('Fechando...')
  }

  return (
    <ButtonClose
      onPress={handleClose}
      size="medium"
    />
  )
}

Props

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | disabled | boolean | false | Se verdadeiro, desabilita o botão | | 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: 32x32px com ícone de 16px
• medium: 40x40px com ícone de 20px
• large: 48x48px com ícone de 24px

Temas

O componente se adapta automaticamente aos temas claro e escuro:

• Tema claro: Fundo cinza claro com ícone escuro
• Tema escuro: Fundo cinza escuro com ícone claro

Acessibilidade

• Suporte completo a leitores de tela
• Label de acessibilidade "Fechar"
• Estados de foco e pressed
• Indicação visual de estado desabilitado

Dependências

• @wecareu/theme: Sistema de temas
• @wecareu/icons: Biblioteca de ícones (usa o ícone "close")
• react-native: Framework base