Bootstrap: Botões e Grupos de Botões

Q: P: Qual a diferença entre usar <button> e <a> como botão?

R: é usado para disparar envios de formulário ou ações interativas (enviar, salvar, excluir). é usado para navegação de página (páginas de detalhe, links externos). Semanticamente, um botão faz algo, um 'a' vai a algum lugar.

Q: P: Grupos de botões podem ser aninhados?

R: Sim. Você pode colocar outro btn-group dentro de um btn-group para criar grupos dropdown, por exemplo: 1 Mais ... . Grupos de botões aninhados permanecerão na mesma linha, adequados para um botão "mais" em um componente de paginação.

Q: P: Ícones podem ser colocados dentro de botões? Como fazer um botão puramente de ícone?

R: Sim. Basta colocar um ou diretamente dentro do . Para botões puramente de ícone, recomenda-se adicionar aria-label para descrição textual: . Bootstrap Icons é a biblioteca de ícones companheira oficial, use para incorporá-la.

Última atualização: 2026-08-26

1. Introdução à Lição

(1) Pré-requisitos

Lição 08: Navbar

(2) 🎯 O que você vai aprender

Usar as variantes de botão do Bootstrap (cor, tamanho, contorno)
Controlar estados de botão (desabilitado, carregando)
Combinar botões relacionados usando grupos de botões
Construir barras de ferramentas com btn-toolbar
Implementar botões de alternância e botões em nível de bloco

(3) Ponto de Dor

A página de registro da Alice precisa de três botões: enviar (botão azul primário), redefinir (botão cinza secundário) e entrar com conta existente (estilo link) — cada botão tem um estilo diferente, mas todos baseiam-se na classe base .btn.

(4) Solução

O Bootstrap fornece um rico conjunto de estilos de botão e opções de tamanho, além da capacidade de combinar e organizar botões em grupos.

(5) Benefícios

Com o sistema de botões do Bootstrap, você pode implementar interfaces de botão profissionais, consistentes e acessíveis sem escrever CSS personalizado.

2. Fundamentos de Botões

O Bootstrap usa .btn como a classe base de botão, combinada com variantes de cor:

HTML

<button type="button" class="btn btn-primary">Primário</button>
<button type="button" class="btn btn-secondary">Secundário</button>
<button type="button" class="btn btn-success">Sucesso</button>
<button type="button" class="btn btn-danger">Perigo</button>
<button type="button" class="btn btn-warning">Aviso</button>
<button type="button" class="btn btn-info">Informação</button>
<button type="button" class="btn btn-light">Claro</button>
<button type="button" class="btn btn-dark">Escuro</button>
<button type="button" class="btn btn-link">Link</button>

▶ Experimente

▶ Exemplo: Mostruário de Variantes de Botão

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Botão</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Botões Padrão</h5>
    <button class="btn btn-primary">Primário</button>
    <button class="btn btn-secondary">Secundário</button>
    <button class="btn btn-success">Sucesso</button>
    <button class="btn btn-danger">Perigo</button>
    <button class="btn btn-warning">Aviso</button>
    <button class="btn btn-info">Informação</button>
    <button class="btn btn-light">Claro</button>
    <button class="btn btn-dark">Escuro</button>
    <button class="btn btn-link">Link</button>

    <hr>

    <h5>Botões de Contorno</h5>
    <button class="btn btn-outline-primary">Primário</button>
    <button class="btn btn-outline-secondary">Secundário</button>
    <button class="btn btn-outline-success">Sucesso</button>
    <button class="btn btn-outline-danger">Perigo</button>

    <hr>

    <h5>Tamanhos de Botão</h5>
    <button class="btn btn-primary btn-lg">Grande</button>
    <button class="btn btn-primary">Padrão</button>
    <button class="btn btn-primary btn-sm">Pequeno</button>
  </div>
</body>
</html>

▶ Experimente

3. Variantes de Botão

(1) Semântica de Cores

Classe	Cor	Uso
`btn-primary`	Azul	Ações primárias (enviar, próximo passo)
`btn-secondary`	Cinza	Ações secundárias (cancelar, voltar)
`btn-success`	Verde	Ações de sucesso (salvar, confirmar)
`btn-danger`	Vermelho	Ações perigosas (excluir, sair)
`btn-warning`	Amarelo	Ações de aviso
`btn-info`	Ciano	Ações informativas
`btn-light`	Branco	Usar em fundos claros
`btn-dark`	Preto	Usar em fundos escuros
`btn-link`	Cor de link	Disfarça um botão como link

(2) Botões de Contorno

HTML

<button class="btn btn-outline-primary">Contorno Primário</button>
<button class="btn btn-outline-danger">Contorno Perigo</button>

▶ Experimente

(3) Tamanhos de Botão

Classe	Tamanho da Fonte	Padding	Cenário
`btn-lg`	1.25rem	0.5rem 1rem	CTAs de destaque, seções Hero
Padrão	1rem	0.375rem 0.75rem	Uso geral
`btn-sm`	0.875rem	0.25rem 0.5rem	Dentro de tabelas, espaços compactos

4. Estados de Botão

HTML

<button class="btn btn-primary" disabled>Botão desabilitado</button>
<a href="#" class="btn btn-primary disabled" tabindex="-1">Link desabilitado</a>

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Carregando...
</button>

▶ Experimente

5. Botões de Bloco

HTML

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Botão de bloco largura total</button>
  <button class="btn btn-outline-secondary" type="button">Também largura total</button>
</div>

▶ Experimente

6. Grupos de Botões

HTML

<div class="btn-group" role="group">
  <button class="btn btn-primary">Esquerda</button>
  <button class="btn btn-primary">Meio</button>
  <button class="btn btn-primary">Direita</button>
</div>

▶ Experimente

(1) Variações de Grupo de Botões

HTML

<div class="btn-group-vertical">
  <button class="btn btn-primary">Topo</button>
  <button class="btn btn-primary">Meio</button>
  <button class="btn btn-primary">Base</button>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2">
    <button class="btn btn-outline-secondary">B</button>
    <button class="btn btn-outline-secondary">I</button>
    <button class="btn btn-outline-secondary">U</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-outline-secondary">Esquerda</button>
    <button class="btn btn-outline-secondary">Centro</button>
    <button class="btn btn-outline-secondary">Direita</button>
  </div>
</div>

▶ Experimente

Classe	Efeito	Cenário
`btn-group`	Agrupamento horizontal	Barras de ferramentas, paginação
`btn-group-vertical`	Agrupamento vertical	Opções de barra lateral
`btn-toolbar`	Combina múltiplos grupos em uma barra	Editores de texto rico

7. Decisões e Referência de Botões

(1) Fluxo de Seleção de Variante de Botão

graph TD
    A[Precisa de um botão] --> B{Ação primária ou secundária?}
    B -->|Ação primária| C{Seleção de cor}
    B -->|Ação secundária| D[btn-outline-* ou btn-link]
    C --> E[Enviar/Salvar → btn-primary]
    C --> F[Perigo/Excluir → btn-danger]
    C --> G[Sucesso/Confirmar → btn-success]
    C --> H[Aviso/Alerta → btn-warning]
    D --> I{Com borda?}
    I -->|Sim| J[btn-outline-primary / outline-danger]
    I -->|Não| K[btn-link estilo link]
    A --> L{Requisito de tamanho?}
    L --> M[Destaque → btn-lg]
    L --> N[Padrão → Padrão]
    L --> O[Compacto → btn-sm]
    A --> P{Agrupado?}
    P --> Q[btn-group horizontal / btn-group-vertical vertical]

(2) Referência Completa de Tamanhos de Botão

Classe	Tamanho da Fonte	padding-y	padding-x	Raio da Borda	Cenário
`btn-lg`	1.25rem	0.5rem	1rem	0.5rem	CTAs, seções Hero
Padrão	1rem	0.375rem	0.75rem	0.375rem	Botões gerais
`btn-sm`	0.875rem	0.25rem	0.5rem	0.25rem	Tabelas, espaços compactos

(3) Referência de Tipos de Grupo de Botões

Classe	Layout	Estrutura HTML	Cenário
`btn-group`	Arranjo horizontal	`div.btn-group > button*N`	Paginação, grupos de ação
`btn-group-vertical`	Arranjo vertical	`div.btn-group-vertical > button*N`	Botões de barra lateral
`btn-toolbar`	Combina múltiplos btn-groups	`div.btn-toolbar > div.btn-group*N`	Editores de texto rico
`btn-group` + `dropup`	Abre para cima	`div.btn-group.dropup`	Menus de upload
`btn-group` + `dropend`	Abre para a direita	`div.btn-group.dropend`	Menus laterais

▶ Exemplo: Barra de Ferramentas de Botões

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Barra de Ferramentas de Botões</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Barra de Ferramentas do Editor de Texto Rico</h5>

    <div class="btn-toolbar mb-3" role="toolbar" aria-label="Barra de formatação">
      <div class="btn-group me-2" role="group" aria-label="Estilo de texto">
        <button type="button" class="btn btn-outline-secondary">B</button>
        <button type="button" class="btn btn-outline-secondary">I</button>
        <button type="button" class="btn btn-outline-secondary">U</button>
      </div>
      <div class="btn-group me-2" role="group" aria-label="Alinhamento">
        <button type="button" class="btn btn-outline-secondary">⬅</button>
        <button type="button" class="btn btn-outline-secondary">⬇</button>
        <button type="button" class="btn btn-outline-secondary">➡</button>
      </div>
      <div class="btn-group" role="group" aria-label="Ações">
        <button type="button" class="btn btn-outline-secondary">🔗</button>
        <button type="button" class="btn btn-outline-secondary">📷</button>
      </div>
    </div>

    <p class="text-muted small">btn-toolbar combina múltiplos btn-groups, me-2 controla o espaçamento entre grupos</p>
  </div>
</body>
</html>

▶ Experimente

▶ Exemplo: Botões de Alternância

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Botões de Alternância</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5 class="mb-3">Alternância por Rádio</h5>
    <div class="btn-group mb-4" role="group" aria-label="Alternância básica de rádio">
      <input type="radio" class="btn-check" name="options" id="option1" checked>
      <label class="btn btn-outline-primary" for="option1">Visão do Dia</label>

      <input type="radio" class="btn-check" name="options" id="option2">
      <label class="btn btn-outline-primary" for="option2">Visão da Semana</label>

      <input type="radio" class="btn-check" name="options" id="option3">
      <label class="btn btn-outline-primary" for="option3">Visão do Mês</label>
    </div>

    <h5 class="mb-3">Alternância por Caixa de Seleção</h5>
    <div class="btn-group" role="group" aria-label="Alternância básica de caixa de seleção">
      <input type="checkbox" class="btn-check" id="checkbox1">
      <label class="btn btn-outline-success" for="checkbox1">Negrito</label>

      <input type="checkbox" class="btn-check" id="checkbox2">
      <label class="btn btn-outline-success" for="checkbox2">Itálico</label>

      <input type="checkbox" class="btn-check" id="checkbox3">
      <label class="btn btn-outline-success" for="checkbox3">Sublinhado</label>
    </div>

    <p class="text-muted small mt-3">Usa <code>btn-check</code> + <code>&lt;label&gt;</code> para obter o efeito de alternância, sem necessidade de JavaScript.</p>
  </div>
</body>
</html>

▶ Experimente

▶ Exemplo: Botões em Estado de Carregamento

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Botões de Carregamento</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5 class="mb-4">Botões em Estado de Carregamento</h5>

    <div class="d-flex gap-2 mb-3">
      <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
        Carregando...
      </button>
      <button class="btn btn-success" disabled>
        <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
        Salvando...
      </button>
      <button class="btn btn-danger" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
        Excluindo...
      </button>
    </div>

    <div class="d-flex gap-2">
      <button class="btn btn-outline-primary" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
        Conectando...
      </button>
      <button class="btn btn-outline-success">
        <span class="spinner-border spinner-border-sm me-2 d-none" role="status"></span>
        Botão Enviar
      </button>
    </div>

    <p class="text-muted small mt-3">Usa <code>spinner-border</code> ou <code>spinner-grow</code> com <code>disabled</code> para implementar o estado de carregamento.</p>
  </div>
</body>
</html>

▶ Experimente

▶ Exemplo: Botões de Bloco

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Botões de Bloco</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5 class="mb-3">Botões de Bloco (d-grid)</h5>

    <div class="d-grid gap-2 mb-4">
      <button class="btn btn-primary btn-lg" type="button">Ação Primária — Botão largura total</button>
      <button class="btn btn-outline-secondary" type="button">Ação Secundária</button>
    </div>

    <h5 class="mb-3">Bloco Responsivo</h5>
    <div class="d-grid gap-2 d-md-block">
      <button class="btn btn-primary me-md-2" type="button">Desktop Lado a Lado</button>
      <button class="btn btn-outline-secondary" type="button">Mobile Empilhado</button>
    </div>

    <p class="text-muted small mt-3">
      <code>d-grid gap-2</code> implementa botões empilhados largura total, <code>d-md-block</code> restaura o lado a lado no desktop.
    </p>

    <hr>

    <h5 class="mb-3">Variante de Bloco do Grupo de Botões</h5>
    <div class="d-grid gap-2">
      <div class="btn-group" role="group">
        <button class="btn btn-primary">Opção Um</button>
        <button class="btn btn-primary">Opção Dois</button>
        <button class="btn btn-primary">Opção Três</button>
      </div>
    </div>
  </div>
</body>
</html>

▶ Experimente

❓ Perguntas Frequentes

📖 Resumo

Classe base .btn + variante de cor btn-{color} define a aparência do botão
btn-outline-{color} botões de contorno, btn-lg/sm controlam o tamanho
Atributo disabled desabilita botões, spinner-border adiciona estado de carregamento
btn-group / btn-group-vertical combina botões, btn-toolbar organiza barras de ferramentas

📝 Exercícios

⭐ Crie uma barra de ações inferior para um formulário: Enviar (btn-primary btn-lg), Salvar Rascunho (btn-outline-secondary), Excluir (btn-outline-danger), Cancelar (btn-link).
⭐⭐ Use btn-group para criar um componente de paginação: Anterior + números de página 1-5 + Próximo, com o número de página selecionado destacado como btn-primary.
⭐⭐⭐ Crie uma barra de ferramentas: Use btn-toolbar para combinar dois grupos de botões: formatação de texto (B/I/U) e alinhamento (Esquerda/Centro/Direita).

Lição Anterior: Navbar · Próxima Lição: Cartões

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós