Rozet · Armada

Soft, solid ve outline

Neutral Primary Success Info Warning Danger Purple Pink Teal

Kodu göster

<div class="sc-col">
    @foreach (['soft', 'solid', 'outline'] as $variant)
        <div class="sc-row">
            @foreach (['neutral', 'primary', 'success', 'info', 'warning', 'danger', 'purple', 'pink', 'teal'] as $tone)
                <armada:badge :$variant :$tone>{{ ucfirst($tone) }}</armada:badge>
            @endforeach
        </div>
    @endforeach
</div>

Nokta, ikon, boyut ve kare

Aktif Canlı Planlandı Küçük Büyük PRO

Kodu göster

<div class="sc-row">
    <armada:badge tone="success" dot>Aktif</armada:badge>
    <armada:badge tone="danger" dot pulse>Canlı</armada:badge>
    <armada:badge tone="info" icon="clock">Planlandı</armada:badge>
    <armada:badge size="sm">Küçük</armada:badge>
    <armada:badge size="lg" tone="primary">Büyük</armada:badge>
    <armada:badge square variant="solid" tone="purple">PRO</armada:badge>
</div>

Sayaç rozeti

Herhangi bir öğenin köşesine sayı veya nokta.

3 99+ 2

Kodu göster

<div class="sc-row" style="gap:24px">
    <armada:notification-badge count="3"><armada:button variant="ghost" icon="bell" aria-label="Bildirimler" /></armada:notification-badge>
    <armada:notification-badge count="99+"><armada:button variant="ghost" icon="mail" aria-label="E-posta" /></armada:notification-badge>
    <armada:notification-badge><armada:button variant="ghost" icon="message-circle" aria-label="Mesajlar" /></armada:notification-badge>
    <armada:notification-badge count="2" tone="primary"><armada:avatar name="Amiral Atik" /></armada:notification-badge>
</div>

Özellikler

<armada:badge>

Prop	Varsayılan	Not
`variant`	`'soft'`	soft \| solid \| outline
`tone`	`'neutral'`
`size`	`'md'`	sm \| md \| lg
`icon`	`null`
`dot`	`false`
`pulse`	`false`
`square`	`false`

<armada:notification-badge>

Prop	Varsayılan
`count`	`null`
`tone`	`'danger'`