MAD Lab

Feedback e display

mad-badge mad-card mad-avatar mad-skeleton

Badges

mad-badge nas variantes disponíveis, com dot de status e ícone.

Default Primary Secondary Success Warning Danger Info Outline

Online Cancelado Pendente

resources/views/tutor/examples/feedback-badges-cards/badges.blade.php

<div style="display:flex;flex-wrap:wrap;gap:8px;">
    <mad-badge>Default</mad-badge>
    <mad-badge variant="primary">Primary</mad-badge>
    <mad-badge variant="secondary">Secondary</mad-badge>
    <mad-badge variant="success">Success</mad-badge>
    <mad-badge variant="warning">Warning</mad-badge>
    <mad-badge variant="danger">Danger</mad-badge>
    <mad-badge variant="info">Info</mad-badge>
    <mad-badge variant="outline">Outline</mad-badge>
</div>
<div style="height:12px;"></div>
<div style="display:flex;flex-wrap:wrap;gap:8px;">
    <mad-badge variant="success" dot>Online</mad-badge>
    <mad-badge variant="danger" icon="x">Cancelado</mad-badge>
    <mad-badge variant="warning" icon="clock">Pendente</mad-badge>
</div>

Avatar

mad-avatar gera iniciais a partir do name, ou recebe um ícone no slot.

resources/views/tutor/examples/feedback-badges-cards/avatar.blade.php

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px;">
    <mad-avatar name="Ana Souza" size="sm" />
    <mad-avatar name="Bruno Lima" />
    <mad-avatar name="Carla Mendes" size="lg" variant="primary" />
    <mad-avatar name="Diego Prado" size="xl" variant="success" />
    <mad-avatar size="lg" variant="primary"><i data-lucide="bot"></i></mad-avatar>
</div>

Card

mad-card com header e footer opcionais.

Plano Profissional

Acesso completo aos módulos de grid, dashboard e PDF, com suporte prioritário.

Renovação em 12/09/2026

resources/views/tutor/examples/feedback-badges-cards/card.blade.php

<mad-card header="Plano Profissional" footer="Renovação em 12/09/2026">
    Acesso completo aos módulos de grid, dashboard e PDF, com suporte prioritário.
</mad-card>

Skeleton (placeholder)

mad-skeleton simula o formato do conteúdo enquanto ele carrega.

Placeholder exibido enquanto o conteúdo real ainda não chegou do servidor.

resources/views/tutor/examples/feedback-badges-cards/skeleton.blade.php

<p style="margin:0 0 10px;font-size:.85rem;color:#6b7280;">Placeholder exibido enquanto o conteúdo real ainda não chegou do servidor.</p>
<div style="display:flex;gap:12px;align-items:center;max-width:420px;">
    <mad-skeleton width="48px" height="48px" rounded="full" />
    <div style="flex:1;display:flex;flex-direction:column;gap:6px;">
        <mad-skeleton width="60%" height="14px" />
        <mad-skeleton width="90%" height="12px" />
    </div>
</div>
<div style="height:16px;"></div>
<mad-skeleton height="20px" rounded="md" />
<div style="height:8px;"></div>
<mad-skeleton height="20px" rounded="md" />
<div style="height:8px;"></div>
<mad-skeleton height="20px" width="70%" rounded="md" />

Composição: card de contato

mad-card + mad-avatar + mad-badge combinados.

Elaine Ramos

Ativa

resources/views/tutor/examples/feedback-badges-cards/composicao.blade.php

<mad-card>
    <div style="display:flex;align-items:center;gap:12px;">
        <mad-avatar name="Elaine Ramos" size="lg" variant="primary" />
        <div>
            <strong>Elaine Ramos</strong>
            <div style="margin-top:4px;">
                <mad-badge variant="success" dot>Ativa</mad-badge>
            </div>
        </div>
    </div>
</mad-card>

← AnteriorBotões Próxima →Alertas e callouts

Código-fonte completo da página

app/control/Tutor/TutorFeedbackBadgesCards.php

<?php

namespace App\Control\Tutor;

use App\Support\Tutor\TutorPage;

class TutorFeedbackBadgesCards extends TutorPage
{
    protected string $catalogKey = 'feedback_badges_cards';
}

resources/views/tutor/feedback/badges-cards.blade.php

<x-tutor-page page="feedback_badges_cards">
    <x-tutor-demo demo="tutor.examples.feedback-badges-cards.badges"
        title="Badges" desc="mad-badge nas variantes disponíveis, com dot de status e ícone." />

    <x-tutor-demo demo="tutor.examples.feedback-badges-cards.avatar"
        title="Avatar" desc="mad-avatar gera iniciais a partir do name, ou recebe um ícone no slot." />

    <x-tutor-demo demo="tutor.examples.feedback-badges-cards.card"
        title="Card" desc="mad-card com header e footer opcionais." />

    <x-tutor-demo demo="tutor.examples.feedback-badges-cards.skeleton"
        title="Skeleton (placeholder)" desc="mad-skeleton simula o formato do conteúdo enquanto ele carrega." />

    <x-tutor-demo demo="tutor.examples.feedback-badges-cards.composicao"
        title="Composição: card de contato" desc="mad-card + mad-avatar + mad-badge combinados." />
</x-tutor-page>

Badges e cards