Esta página reúne variações de cor, estilo, tamanho, alinhamento e estados do componente de botão.
{{ t.pages.button.colorsTitle }}
{{ t.pages.button.colorsSubtitle }}Light button
Use .btn-[light|outline-light|flat-light]
Dark button
Use .btn-[dark|outline-dark|flat-dark]
Primary button
Use .btn-[primary|outline-primary|flat-primary]
Secondary button
Use .btn-[secondary|outline-secondary|flat-secondary]
Danger button
Use .btn-[danger|outline-danger|flat-danger]
Success button
Use .btn-[success|outline-success|flat-success]
Warning button
Use .btn-[warning|outline-warning|flat-warning]
Info button
Use .btn-[info|outline-info|flat-info]
Indigo button
Use .btn-[indigo|outline-indigo|flat-indigo]
{{ t.pages.button.solidTitle }}
{{ t.pages.button.solidSubtitle }}Solid button
Botao padrao com cor de fundo solida.
Solid with icon
Botao com icone e texto.
Rounded button
Botao com rounded-pill.
Labeled button
Icone separado com fundo mais escuro.
Rounded labeled
Labeled com rounded-pill.
Icon button
Somente icone com btn-icon.
{{ t.pages.button.outlineTitle }}
{{ t.pages.button.outlineSubtitle }}Outline button
Fundo transparente no estado padrao.
Outline with icon
Outline com icone.
Rounded outline
Outline com rounded-pill.
Labeled outline
Outline labeled com icone separado.
Icon outline
Somente icone no estilo outline.
Border options
Borda transparente, padrao e grossa.
{{ t.pages.button.flatTitle }}
{{ t.pages.button.flatSubtitle }}Flat button
Fundo semi-transparente.
Flat with icon
Flat com icone.
Rounded flat
Flat com rounded-pill.
Labeled flat
Flat labeled com icone separado.
Icon flat
Somente icone no estilo flat.
Flat border options
Bordas no estilo flat.
{{ t.pages.button.linkTitle }}
{{ t.pages.button.linkSubtitle }}Link button
Estilo de link textual.
Link with icon
Link com icone.
Labeled link
Link com label de icone.
{{ t.pages.button.sizesTitle }}
{{ t.pages.button.sizesSubtitle }}Solid button sizes
Large, default e small.
Labeled button sizes
Labeled em diferentes tamanhos.
Rounded button sizes
Rounded em diferentes tamanhos.
{{ t.pages.button.alignTitle }}
{{ t.pages.button.alignSubtitle }}Left icon alignment
Icone antes do texto.
Right icon alignment
Icone depois do texto.
Label positions
Labeled start e end.