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.

Nesta página

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.

html

<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 às tecnologias assistivas

Usar cores para adicionar significado fornece apenas uma indicação visual, que não será transmitida aos usuários de tecnologias assistivas – como leitores de tela. Certifique-se de que as informações indicadas pela cor sejam óbvias do próprio conteúdo (por exemplo, o texto visível) ou sejam incluídas por meios alternativos, como texto adicional oculto com a .visually-hiddenclasse.

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.

Link

html

<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.

html

<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>

Alguns dos estilos de botão usam uma cor de primeiro plano relativamente clara e devem ser usados apenas em um fundo escuro para ter contraste suficiente.

Tamanhos

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

html

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

html

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

Você pode até criar seu próprio dimensionamento personalizado com variáveis CSS:

html

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

Estado desativado

Faça os botões parecerem inativos adicionando o disabledatributo booleano a qualquer <button>elemento. Botões desabilitados foram pointer-events: noneaplicados, impedindo que os estados de foco e ativos sejam acionados.

html

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" 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.
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.

Link principal Link

html

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary 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.

Link principal Link

html

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

Botões de bloqueio

Crie pilhas responsivas de “botões de bloco” de largura total como os do Bootstrap 4 com uma mistura de nossos utilitários de exibição e de intervalo. Ao usar utilitários em vez de classes específicas de botões, temos um controle muito maior sobre espaçamento, alinhamento e comportamentos responsivos.

html

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Aqui criamos uma variação responsiva, começando com botões empilhados verticalmente até o mdbreakpoint, onde .d-md-blocksubstitui a .d-gridclasse, anulando assim o gap-2utilitário. Redimensione seu navegador para vê-los mudar.

html

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Você pode ajustar a largura de seus botões de bloco com classes de largura de coluna de grade. Por exemplo, para um “botão de bloqueio” de meia largura, use .col-6. Centralize-o horizontalmente com .mx-auto, também.

html

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Utilitários adicionais podem ser usados para ajustar o alinhamento dos botões na horizontal. Aqui, pegamos nosso exemplo responsivo anterior e adicionamos alguns utilitários flexíveis e um utilitário de margem no botão para alinhar os botões à direita quando eles não estiverem mais empilhados.

html

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Plug-in de botão

O plug-in de botão permite que você crie botões de ativação/desativação simples.

Visualmente, esses botões de alternância são idênticos aos botões de alternância da caixa de seleção . No entanto, eles são transmitidos de maneira diferente pelas tecnologias assistivas: as alternâncias das caixas de seleção serão anunciadas pelos leitores de tela como "marcadas"/"não marcadas" (já que, apesar de sua aparência, ainda são fundamentalmente caixas de seleção), enquanto esses botões de alternância serão anunciados como “botão”/“botão pressionado”. A escolha entre essas duas abordagens dependerá do tipo de alternância que você está criando e se a alternância fará ou não sentido para os usuários quando anunciada como uma caixa de seleção ou como um botão real.

Alternar estados

Adicionar data-bs-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" garantir que ela seja transmitida adequadamente às tecnologias assistivas.

html

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

Alternar link Link de alternância ativo Link de alternância desativado

html

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Métodos

Você pode criar uma instância de botão com o construtor de botão, por exemplo:

const bsButton = new bootstrap.Button('#myButton')

Método	Descrição
`dispose`	Destrói o botão de um elemento. (Remove os dados armazenados no elemento DOM)
`getInstance`	Método estático que permite obter a instância do botão associada a um elemento DOM, você pode usá-lo assim: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Método estático que retorna uma instância de botão associada a um elemento DOM ou cria uma nova caso não tenha sido inicializada. Você pode usar assim: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Alterna o estado de push. Dá ao botão a aparência de que foi ativado.

Por exemplo, para alternar todos os botões

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

Variáveis

Adicionado na v5.2.0

Como parte da abordagem de variáveis CSS em evolução do Bootstrap, os botões agora usam variáveis CSS locais .btnpara personalização aprimorada em tempo real. Os valores das variáveis CSS são definidos por meio do Sass, portanto, a personalização do Sass também é suportada.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Cada .btn-*classe modificadora atualiza as variáveis CSS apropriadas para minimizar regras CSS adicionais com nossos button-variant(), button-outline-variant()e button-size()mixins.

Aqui está um exemplo de construção de uma .btn-*classe modificadora personalizada, como fazemos para os botões exclusivos de nossos documentos, reatribuindo as variáveis CSS do Bootstrap com uma mistura de nossas próprias variáveis CSS e Sass.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Variáveis atrevidas

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Mixins atrevidos

Existem três mixins para botões: mixins de variante de botão e contorno de botão (ambos baseados em $theme-colors), além de um mixin de tamanho de botão.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Loops atrevidos

As variantes de botão (para botões regulares e de contorno) usam seus respectivos mixins com nosso $theme-colorsmapa para gerar as classes modificadoras em scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

Botões

Exemplos

Transmitindo significado às tecnologias assistivas

Desabilitar quebra de texto

Etiquetas de botão

Botões de contorno

Tamanhos

Estado desativado

Aviso de funcionalidade do link

Botões de bloqueio

Plug-in de botão

Alternar estados

Métodos

CSS

Variáveis

Variáveis ​​atrevidas

Mixins atrevidos

Loops atrevidos

Variáveis atrevidas