Botões

Use os estilos de botão personalizados do Bootstrap para ações em formulários, caixas de diálogo e muito mais com suporte para vários tamanhos, estados e muito mais.

Exemplos

O Bootstrap inclui vários estilos de botão predefinidos, cada um servindo a seu próprio propósito semântico, com alguns extras adicionados para maior 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>

Desabilitar quebra de texto

Se você não quiser que o texto do botão seja quebrado, você pode adicionar a .text-nowrapclasse ao botão. No Sass, você pode definir $btn-white-space: nowrappara desabilitar a quebra de texto para cada botão.

Etiquetas de botão

As .btnclasses são projetadas para serem usadas com o <button>elemento. No entanto, você também pode usar essas classes em <a>ou <input>elementos (embora alguns navegadores possam aplicar uma renderização ligeiramente diferente).

Ao usar classes de botão em <a>elementos que são usados ​​para acionar a funcionalidade na página (como recolher conteúdo), em vez de vincular a novas páginas ou seções na página atual, esses links devem receber um role="button"para transmitir adequadamente sua finalidade a tecnologias assistivas, como leitores de tela.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</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 de contorno

Precisa de um botão, mas não das cores de fundo pesadas que eles trazem? Substitua as classes modificadoras padrão pelas .btn-outline-*que removem todas as imagens e cores de fundo 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

Gosta de botões maiores ou menores? Adicione .btn-lgou .btn-smpara tamanhos adicionais.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Crie botões de nível de bloco - aqueles que abrangem toda a largura de um pai - adicionando .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Estado ativo

Os botões aparecerão pressionados quando ativos com um fundo mais escuro, borda mais escura e, quando as sombras estiverem habilitadas, uma sombra inserida. Não há necessidade de adicionar uma classe a <button>s, pois eles usam uma pseudo-classe . No entanto, você ainda pode forçar a mesma aparência ativa com .active(e incluir o aria-pressed=“true”atributo) caso precise replicar o estado programaticamente.

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

Estado desativado

Faça os botões parecerem inativos adicionando o disabledatributo booleano a qualquer <button>elemento.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

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

• <a>s não suportam o disabledatributo, então você deve adicionar a .disabledclasse para fazê-la parecer visualmente desabilitada.
• Alguns estilos amigáveis ​​​​para o futuro estão incluídos para desativar todos os pointer-eventsbotões de âncora. Em navegadores que suportam essa propriedade, você não verá o cursor desabilitado.
• O uso de botões desabilitados <a>deve incluir o aria-disabled="true"atributo para indicar o estado do elemento para tecnologias assistivas.
• Botões desabilitados usando <a> não devem incluir o hrefatributo.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Aviso de funcionalidade do link

Para cobrir os casos em que você tem que manter o hrefatributo em um link desabilitado, a .disabledclasse usa pointer-events: nonepara tentar desabilitar a funcionalidade de link de <a>s. Observe que essa propriedade CSS ainda não é padronizada para HTML, mas todos os navegadores modernos a suportam. Além disso, mesmo em navegadores que suportam pointer-events: none, a navegação pelo teclado permanece inalterada, o que significa que usuários de teclado com visão e usuários de tecnologias assistivas ainda poderão ativar esses links. Portanto, para ser seguro, além de aria-disabled="true", inclua também um tabindex="-1"atributo nesses links para impedir que eles recebam o foco do teclado e use JavaScript personalizado para desativar completamente sua funcionalidade.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Plug-in de botão

Faça mais com botões. Controle os estados dos botões ou crie grupos de botões para mais componentes, como barras de ferramentas.

Alternar estados

Adicionar data-toggle="button"para alternar o activeestado de um botão. Se você estiver alternando previamente um botão, deverá adicionar manualmente a .activeclasse e aria-pressed="true" ao arquivo <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Caixa de seleção e botões de opção

Os estilos do Bootstrap .buttonpodem ser aplicados a outros elementos, como <label>s, para fornecer alternância de caixa de seleção ou botão de estilo de rádio. Adicione data-toggle="buttons"a um .btn-groupque contém esses botões modificados para habilitar seu comportamento de alternância via JavaScript e adicione .btn-group-togglepara estilizar os <input>s em seus botões. Observe que você pode criar botões com alimentação de entrada única ou grupos deles.

O estado marcado para esses botões só é atualizado via clickevento no botão. Se você usar outro método para atualizar a entrada—por exemplo, com <input type="reset">ou aplicando manualmente a propriedade da entrada — checkedvocê precisará ativar manualmente..active<label>

Observe que os botões pré-marcados exigem que você adicione manualmente a .activeclasse ao arquivo <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Métodos