Botões

Use os botões Bootstrap personalizados para ações em formulários, diálogos e outras coisas. Lembrando que esse componente tem suporte a escolha de tamanhos, estados e muito mais.

Exemplos

Bootstrap possui vários estilos de botões pré-definidos, cada um com seu próprosito semântico e outros recursos extras para mais controle.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
Transmitindo significado a tecnologias assistivas

Usando cor para adicionar significado só fornece uma indicação visual, a qual não será transmitida para usuários de tecnologias assistivas (como leitores de telas). Se assegure que a informação denotada pela cor é tanto destacada do conteúdo (ex: o texto visível) ou está incluída em meios alternativos, como textos extras escondidos com a classe .sr-class.

Button tags

A classe .btn foi desenhada para ser usada com o elemento <button>. No entanto, você também pode usar esta classe nos elementos <a> ou <input>, apesar de alguns browser aplicarem um visual um pouco diferente.

Quando usando classes de botão em elementos <a> que funcionam como gatilhos in-page (igual aos conteúdos colapsáveis), invés de link para novas páginas ou seções dentro da página atual, estas âncoras devem receber role="button" para expliciar seu propósito a tecnologias assistivas, como leitores de telas.

Link
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Botão</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Botões outline

Precisa de um botão, mas sem cor de backround? Substitua as classes modificadoras padrões pelas .btn-outline-* que removem todas as imagens de background e cores, em qualquer botão.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Tamanhos

Botões grandes ou pequenos? Use .btn-lg ou .btn-sm para tamanhos alternativos ao padrão.

<button type="button" class="btn btn-primary btn-lg">Botão grande</button>
<button type="button" class="btn btn-secondary btn-lg">Botão grande</button>
<button type="button" class="btn btn-primary btn-sm">Botão pequeno</button>
<button type="button" class="btn btn-secondary btn-sm">Botão pequeno</button>

Crie botões block-level (ocupam toda a largura do elemento pai), usando a classe .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Botão block-level</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Botão block-level</button>

Estado ativo

Os botões parecem pressionados (background, borda e sombra internas mais escuras), quando estão em estado ativo. Não há necessidade de usar a classe no <button>, porque eles usam uma pseudo-classe. No entanto, você ainda pode forçar a aparência de estado ativo com a classe .active e incuir o atributo aria-pressed="true", se precisar.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Link primário</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Estado desativado

Faça botões parecerem inativos, usando o atributo booleano disabled em qualquer elemento <button>.

<button type="button" class="btn btn-lg btn-primary" disabled>Botão primário</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Botão</button>

Botões desativados usando o elemento <a> se comportam um pouco diferente:

  • O elemento <a> não suport o atributo disabled, então, você deve usar a classe .disabled para fazê-lo parecer desativado, visualmente;
  • Alguns estilos (que ainda não são bem suportados) são usados para desativarem todos os pointer-events, em botões âncora;
    • Em browsers que suportam essa propriedade, você não verá o cursor desativado.
  • Botões desativados devem ter o atributo aria-disabled="true" para indicar o estado do elemento para tecnologias assistivas.
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link primário</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

A class .disabled usa pointer-events: none para tentar desativar a funcionalidade de link do <a>, mas esta propriedade CSS ainda não foi padronizada. Além disso, até em navegadores que suportam pointer-events: none, a navegação por teclado continua inatingida, significando que tanto usuários com ou sem tecnologias assistivas ainda conseguirão ativar estes links. Portanto, para evitar isso, use o atributo tabindex="-1" (evita que tenham foco) nestes links e use seu próprio JavaScript para desativar as funcionalidades.

Plugin de botão

Faça mais com botões. Controle estados ou crie grupos de botões, para mais componentes como toolbars.

Alternar estados

Use data-toggle="button" para alternar o estado ativo do botão. Se você pré-ativar o botão, deve usar a classe .active e o atributo aria-pressed="true", no <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Única alternância
</button>

Botões checkbox e radio

Os estilos do .button Bootstrap podem seren usado em outros elementos, como <label> para se ter um botão no estilo checkbox ou radio com alternância. Use data-toggle="buttons" em um .btn-group para estilizar o os inputs dentro de seus botões. Perceba que você pode criar botões com apenas um input ou grupos deles.

O estado checado destes botões só é atualizado através do evento de clique, no botão. Se você usar outro método para atualizar o input (ex: <input type="reset"> ou aplicando a propriedade checked, manualmente), vai precisar anternar a classe .active da <label>, manualmente.

Note que botões pré-checados requerem que você coloque a classe .active, manualmente, no input do <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checado
  </label>
</div>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Ativo
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Métodos

Método Descrição
$().button('toggle') Alterna o estado. Dá ao botão uma aparência como se estivesse ativado.
$().button('dispose') Destroi o botão de um elemento.