Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de botão

Última atualização:

Botão Tailwind CSS somente CSS com variantes primária, secundária, sotaque, fantasma, contorno e suave. Tamanhos xs-xl, estado de carregamento, desativado e botões de ícone. Somente CSS, WCAG AA, funciona com Django, HTMX, Laravel, React.

Componentes de botão são elementos interativos que acionam ações ou direcionam os usuários para novas páginas. O sistema de botões Frutjam oferece vários tamanhos, cores e estilos por meio de classes modificadoras - todos construídos com a abordagem de utilitário CSS Tailwind para botões leves e altamente personalizáveis ​​​​que funcionam perfeitamente em estruturas e projetos.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
btnBaseElemento de botão estilizado
btn-outlineEstiloPreenchimento transparente com borda colorida
btn-softEstiloFundo colorido silenciado
btn-ghostEstiloFundo sutil visível apenas ao passar o mouse
btn-dashedEstiloEstilo de borda tracejada
btn-plainEstiloSem fundo ou borda, apenas texto
btn-linkEstiloEstilizado como um hiperlink de texto
btn-pillEstiloFormato de comprimido totalmente arredondado
btn-roundedEstiloArredondamento moderado
btn-circleEstiloCírculo de largura igual para botões de ícone
btn-squareEstiloFormato quadrado sem arredondamento
btn-blockModificadorBotão de bloqueio de largura total
btn-wideModificadorMais amplo que o padrão com preenchimento horizontal extra
btn-activeModificadorForça o estado visual ativo/pressionado
btn-disabledModificadorAparência desativada para elementos que não são botões
btn-xsTamanhoExtra pequeno
btn-smTamanhoPequeno
btn-mdTamanhoMédio (padrão)
btn-lgTamanhoGrande
btn-xlTamanhoExtra grande
btn-2xlTamanho2× extra grande
btn-primaryCorCor do tema principal
btn-secondaryCorCor do tema secundário
btn-accentCorCor do tema de destaque
btn-neutralCorCor neutra do tema
btn-infoCorCor semântica da informação
btn-successCorCor semântica de sucesso
btn-warningCorCor semântica de aviso
btn-errorCorCor semântica do erro

Uso Básico

<button class="btn">Button</button>

<button className="btn">Button</button>

Tamanhos de botão

html 
1
2
3
4
5
6
<button class="btn btn-xs">Xsmall</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-md">Medium</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-xl">Xlarge</button>
<button class="btn btn-2xl">2XLarge</button>

Cores dos botões

html 
1
2
3
4
5
6
7
8
9
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>
<button class="btn btn-neutral">Neutral</button>

Estilos de botão

Botões suaves

html 
1
2
3
4
5
6
7
8
9
<button class="btn btn-soft">Default</button>
<button class="btn btn-primary btn-soft">Primary</button>
<button class="btn btn-secondary btn-soft">Secondary</button>
<button class="btn btn-accent btn-soft">Accent</button>
<button class="btn btn-info btn-soft">Info</button>
<button class="btn btn-success btn-soft">Success</button>
<button class="btn btn-warning btn-soft">Warning</button>
<button class="btn btn-error btn-soft">Error</button>
<button class="btn btn-neutral btn-soft">Neutral</button>

Botões tracejados

html 
1
2
3
4
5
6
7
8
9
<button class="btn btn-dashed">Default</button>
<button class="btn btn-dashed btn-primary">Primary</button>
<button class="btn btn-dashed btn-secondary">Secondary</button>
<button class="btn btn-dashed btn-accent">Accent</button>
<button class="btn btn-dashed btn-info">Info</button>
<button class="btn btn-dashed btn-success">Success</button>
<button class="btn btn-dashed btn-warning">Warning</button>
<button class="btn btn-dashed btn-error">Error</button>
<button class="btn btn-dashed btn-neutral">Neutral</button>

Botões de contorno

html 
1
2
3
4
5
6
7
8
9
<button class="btn btn-outline">Default</button>
<button class="btn btn-outline btn-primary">Primary</button>
<button class="btn btn-outline btn-secondary">Secondary</button>
<button class="btn btn-outline btn-accent">Accent</button>
<button class="btn btn-outline btn-info">Info</button>
<button class="btn btn-outline btn-success">Success</button>
<button class="btn btn-outline btn-warning">Warning</button>
<button class="btn btn-outline btn-error">Error</button>
<button class="btn btn-outline btn-neutral">Neutral</button>

Botões Fantasma

html 
1
2
3
4
5
6
7
8
9
<button class="btn-ghost btn">Default</button>
<button class="btn btn-ghost btn-primary">Primary</button>
<button class="btn btn-ghost btn-secondary">Secondary</button>
<button class="btn btn-ghost btn-accent">Accent</button>
<button class="btn btn-ghost btn-info">Info</button>
<button class="btn btn-ghost btn-success">Success</button>
<button class="btn btn-ghost btn-warning">Warning</button>
<button class="btn btn-ghost btn-error">Error</button>
<button class="btn btn-ghost btn-neutral">Neutral</button>

Botões de link

html 
1
2
3
4
5
6
7
8
9
<button class="btn btn-link">Default</button>
<button class="btn btn-primary btn-link">Primary</button>
<button class="btn btn-secondary btn-link">Secondary</button>
<button class="btn btn-accent btn-link">Accent</button>
<button class="btn btn-info btn-link">Info</button>
<button class="btn btn-success btn-link">Success</button>
<button class="btn btn-warning btn-link">Warning</button>
<button class="btn btn-error btn-link">Error</button>
<button class="btn btn-neutral btn-link">Neutral</button>

Formas de botão

Botão Círculo

html 
1
2
3
<button class="btn btn-circle">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8l16 0" /><path d="M4 16l16 0" /></svg>
</button>

Botão arredondado

html 
1
2
3
4
5
<button class="btn btn-error btn-rounded" aria-label="Remove from favorites">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18">
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path>
  </svg>
</button>

Botão Quadrado

html 
1
2
3
4
5
<button class="btn btn-primary btn-square" aria-label="Add to favorites">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18">
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path>
  </svg>
</button>

Botão de pílula

html 
1
2
3
<button class="btn btn-primary btn-pill">
  Pill button
</button>

Estados do botão

Botões ativos

html 
1
2
3
4
5
6
7
8
9
<button class="btn btn-active">Default</button>
<button class="btn btn-primary btn-active">Primary</button>
<button class="btn btn-secondary btn-active">Secondary</button>
<button class="btn btn-accent btn-active">Accent</button>
<button class="btn btn-info btn-active">Info</button>
<button class="btn btn-success btn-active">Success</button>
<button class="btn btn-warning btn-active">Warning</button>
<button class="btn btn-error btn-active">Error</button>
<button class="btn btn-neutral btn-active">Neutral</button>

Botão desativado

html 
1
2
3
4
<button type="button" class="btn btn-primary" disabled="disabled">Disabled using attribute</button>
<button type="button" class="btn btn-primary btn-disabled" tabindex="-1" role="button" aria-disabled="true">
  Disabled using class name
</button>

Larguras dos botões

Botão largo

html 
<button class="btn btn-primary btn-wide">Wide</button>

Botão Bloquear

html 
<button class="btn btn-primary btn-block">Block</button>

Flexibilidade de tag de botão

html 
1
2
3
4
5
6
7
<input type="button" value="Input" class="btn btn-primary">
<input type="submit" value="Submit" class="btn btn-primary">
<input type="radio" aria-label="Radio" class="btn btn-primary">
<input type="checkbox" aria-label="Checkbox" class="btn btn-primary">
<input type="reset" value="Reset" class="btn btn-primary">
<button type="submit" class="btn btn-primary">Button</button>
<a role="button" class="btn btn-primary">Link</a>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Botão e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP