mad-btn-group

Agrupa varios <mad-btn> lado a lado, sem espaco entre eles, com bordas unidas. Util para toggles de visualizacao, filtros segmentados e barras de acoes compactas.

Props#

O conteudo (slot) sao os <mad-btn> filhos. Qualquer prop dos botoes filhos (variant, size, icon, mad:click, navigate, etc) funciona normalmente.

Uso basico — toggle de periodo#

<mad-btn-group>
    <mad-btn variant="outline">Dia</mad-btn>
    <mad-btn variant="outline">Semana</mad-btn>
    <mad-btn variant="primary">Mes</mad-btn>
</mad-btn-group>

Filtros segmentados com mad:click#

<mad-btn-group>
    <mad-btn variant="outline" mad:click="onFiltrarTodos">Todos</mad-btn>
    <mad-btn variant="outline" mad:click="onFiltrarAtivos">Ativos</mad-btn>
    <mad-btn variant="outline" mad:click="onFiltrarInativos">Inativos</mad-btn>
</mad-btn-group>

Acoes compactas com icones#

<mad-btn-group>
    <mad-btn variant="outline" icon="bold" />
    <mad-btn variant="outline" icon="italic" />
    <mad-btn variant="outline" icon="underline" />
</mad-btn-group>

Navegacao entre views#

<mad-btn-group>
    <mad-btn variant="outline" navigate="PedidoVendaListagem" icon="list">Lista</mad-btn>
    <mad-btn variant="primary" navigate="PedidoVendaKanban" icon="layout-grid">Kanban</mad-btn>
</mad-btn-group>

Tamanhos uniformes#

Todos os botoes do grupo devem ter o mesmo size para alinhamento visual correto.

<mad-btn-group>
    <mad-btn variant="outline" size="sm">Pequeno A</mad-btn>
    <mad-btn variant="outline" size="sm">Pequeno B</mad-btn>
    <mad-btn variant="outline" size="sm">Pequeno C</mad-btn>
</mad-btn-group>

Item ativo destacado#

Use variant="primary" (ou outro destaque) no item selecionado e variant="outline" nos demais.

<mad-btn-group>
    <mad-btn variant="outline" mad:click="onModoLista">Lista</mad-btn>
    <mad-btn variant="primary" mad:click="onModoCards">Cards</mad-btn>
</mad-btn-group>

NUNCA fazer#

{{-- ERRADO: usar div com flex e gap zero manual --}}
<div style="display:flex;gap:0;">
    <mad-btn variant="outline">A</mad-btn>
    <mad-btn variant="outline">B</mad-btn>
</div>

{{-- CERTO --}}
<mad-btn-group>
    <mad-btn variant="outline">A</mad-btn>
    <mad-btn variant="outline">B</mad-btn>
</mad-btn-group>

{{-- ERRADO: misturar tamanhos diferentes — quebra o alinhamento --}}
<mad-btn-group>
    <mad-btn size="sm">A</mad-btn>
    <mad-btn size="lg">B</mad-btn>
</mad-btn-group>

{{-- CERTO: tamanhos uniformes --}}
<mad-btn-group>
    <mad-btn size="sm">A</mad-btn>
    <mad-btn size="sm">B</mad-btn>
</mad-btn-group>

{{-- ERRADO: colocar elementos que nao sao mad-btn dentro --}}
<mad-btn-group>
    <mad-btn>A</mad-btn>
    <span>texto</span>
    <input type="text" />
</mad-btn-group>

{{-- CERTO: somente mad-btn como filhos --}}
<mad-btn-group>
    <mad-btn>A</mad-btn>
    <mad-btn>B</mad-btn>
</mad-btn-group>