Button
Botão
Um botão é um controle que você aperta para fazer algo acontecer na tela atual.
Um exemplo real
Quando você pressiona “Salvar rascunho”, o site salva suas alterações e informa se funcionou.
Partes principais
- 01Rótulo visível
- 02Interaction target
- 03Current state
- 04Keyboard behavior
Use-o quando
Use um botão para ações como enviar, criar, excluir ou ligar e desligar algo.
Não o use quando
Nunca use um botão para ir para outra página. Use um link para isso.
Nome usado no código
<button> Antes de lançar
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome: Complete the task with Botão (Button). User context: Quando você pressiona “Salvar rascunho”, o site salva suas alterações e informa se funcionou. Recommended pattern: Botão (Button). Why it fits: Use um botão para ações como enviar, criar, excluir ou ligar e desligar algo. Do not use it when: Nunca use um botão para ir para outra página. Use um link para isso. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): O padrão cobre apenas o escopo listado. Ele não escolhe o estilo visual, decisão do produto ou exemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Conferir este pedido
Review how Botão (Button) is used now. Definition: Um botão é um controle que você aperta para fazer algo acontecer na tela atual. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.