MAD Lab

Feedback e display

mad-btn mad-btn-group mad-tooltip

Variantes

mad-btn nas 7 variantes de cor/estilo disponíveis.

resources/views/tutor/examples/feedback-botoes/variantes.blade.php

<div style="display:flex;flex-wrap:wrap;gap:8px;">
    <mad-btn variant="primary">Primary</mad-btn>
    <mad-btn variant="secondary">Secondary</mad-btn>
    <mad-btn variant="outline">Outline</mad-btn>
    <mad-btn variant="ghost">Ghost</mad-btn>
    <mad-btn variant="success">Success</mad-btn>
    <mad-btn variant="warning">Warning</mad-btn>
    <mad-btn variant="danger">Danger</mad-btn>
</div>

Tamanhos e ícones

size (sm/padrão/lg) combinado com icon e icon-end.

resources/views/tutor/examples/feedback-botoes/tamanhos-icones.blade.php

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:8px;">
    <mad-btn variant="primary" size="sm" icon="plus">Pequeno</mad-btn>
    <mad-btn variant="primary" icon="save">Médio (padrão)</mad-btn>
    <mad-btn variant="primary" size="lg" icon-end="arrow-right">Grande</mad-btn>
</div>

Estados

loading, disabled e block (largura total).

resources/views/tutor/examples/feedback-botoes/estados.blade.php

<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
    <mad-btn variant="secondary" loading>Carregando</mad-btn>
    <mad-btn variant="secondary" disabled>Desabilitado</mad-btn>
</div>
<div style="height:12px;"></div>
<mad-btn variant="primary" icon="save" block>Ocupa a largura toda (block)</mad-btn>

Grupo unido

mad-btn-group agrupa botões visualmente conectados.

resources/views/tutor/examples/feedback-botoes/grupo.blade.php

<mad-btn-group>
    <mad-btn variant="outline" icon="align-left">Esquerda</mad-btn>
    <mad-btn variant="outline" icon="align-center">Centro</mad-btn>
    <mad-btn variant="outline" icon="align-right">Direita</mad-btn>
</mad-btn-group>

Confirmação

prop confirm pede confirmação antes de disparar a ação do botão.

resources/views/tutor/examples/feedback-botoes/confirmacao.blade.php

<mad-btn variant="danger" icon="trash-2" confirm="Tem certeza que deseja excluir este registro?">
    Excluir com confirmação
</mad-btn>

Tooltip

mad-tooltip envolve qualquer elemento e mostra uma dica ao passar o mouse.

resources/views/tutor/examples/feedback-botoes/tooltip.blade.php

<div style="display:flex;flex-wrap:wrap;gap:16px;">
    <mad-tooltip content="Aparece acima" position="top">
        <mad-btn variant="ghost" icon="info">Topo</mad-btn>
    </mad-tooltip>
    <mad-tooltip content="Aparece abaixo" position="bottom">
        <mad-btn variant="ghost" icon="info">Baixo</mad-btn>
    </mad-tooltip>
    <mad-tooltip content="Aparece à esquerda" position="left">
        <mad-btn variant="ghost" icon="info">Esquerda</mad-btn>
    </mad-tooltip>
    <mad-tooltip content="Aparece à direita" position="right">
        <mad-btn variant="ghost" icon="info">Direita</mad-btn>
    </mad-tooltip>
</div>

← AnteriorPágina e layout Próxima →Badges e cards

Código-fonte completo da página

app/control/Tutor/TutorFeedbackBotoes.php

<?php

namespace App\Control\Tutor;

use App\Support\Tutor\TutorPage;

class TutorFeedbackBotoes extends TutorPage
{
    protected string $catalogKey = 'feedback_botoes';
}

resources/views/tutor/feedback/botoes.blade.php

<x-tutor-page page="feedback_botoes">
    <x-tutor-demo demo="tutor.examples.feedback-botoes.variantes"
        title="Variantes" desc="mad-btn nas 7 variantes de cor/estilo disponíveis." />

    <x-tutor-demo demo="tutor.examples.feedback-botoes.tamanhos-icones"
        title="Tamanhos e ícones" desc="size (sm/padrão/lg) combinado com icon e icon-end." />

    <x-tutor-demo demo="tutor.examples.feedback-botoes.estados"
        title="Estados" desc="loading, disabled e block (largura total)." />

    <x-tutor-demo demo="tutor.examples.feedback-botoes.grupo"
        title="Grupo unido" desc="mad-btn-group agrupa botões visualmente conectados." />

    <x-tutor-demo demo="tutor.examples.feedback-botoes.confirmacao"
        title="Confirmação" desc="prop confirm pede confirmação antes de disparar a ação do botão." />

    <x-tutor-demo demo="tutor.examples.feedback-botoes.tooltip"
        title="Tooltip" desc="mad-tooltip envolve qualquer elemento e mostra uma dica ao passar o mouse." />
</x-tutor-page>

Botões