Componentes
Feedback Icon
Círculo de status semântico standalone. 4 sizes, 6 statuses (incluindo loading com spinner). Bloco base de Banner, Callout, Toast.
Sizes
Quatro tamanhos canônicos: 24, 32, 40, 56 px.
<FeedbackIcon size={24} />
<FeedbackIcon size={32} />
<FeedbackIcon size={40} />
<FeedbackIcon size={56} />
<FeedbackIcon size={24} />
<FeedbackIcon size={32} />
<FeedbackIcon size={40} />
<FeedbackIcon size={56} /> <template>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:24px;height:24px"><span class="material-symbols-outlined" style="font-size:14px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:32px;height:32px"><span class="material-symbols-outlined" style="font-size:18px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:40px;height:40px"><span class="material-symbols-outlined" style="font-size:22px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:56px;height:56px"><span class="material-symbols-outlined" style="font-size:32px">info</span></div>
</template>
<template>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:24px;height:24px"><span class="material-symbols-outlined" style="font-size:14px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:32px;height:32px"><span class="material-symbols-outlined" style="font-size:18px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:40px;height:40px"><span class="material-symbols-outlined" style="font-size:22px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:56px;height:56px"><span class="material-symbols-outlined" style="font-size:32px">info</span></div>
</template> <>
<div className="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style={{width:24,height:24}}><span className="material-symbols-outlined" style={{fontSize:14}}>info</span></div>
<div className="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style={{width:32,height:32}}><span className="material-symbols-outlined" style={{fontSize:18}}>info</span></div>
<div className="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style={{width:40,height:40}}><span className="material-symbols-outlined" style={{fontSize:22}}>info</span></div>
<div className="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style={{width:56,height:56}}><span className="material-symbols-outlined" style={{fontSize:32}}>info</span></div>
</>
<>
<div className="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style={{width:24,height:24}}><span className="material-symbols-outlined" style={{fontSize:14}}>info</span></div>
<div className="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style={{width:32,height:32}}><span className="material-symbols-outlined" style={{fontSize:18}}>info</span></div>
<div className="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style={{width:40,height:40}}><span className="material-symbols-outlined" style={{fontSize:22}}>info</span></div>
<div className="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style={{width:56,height:56}}><span className="material-symbols-outlined" style={{fontSize:32}}>info</span></div>
</> <div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:24px;height:24px"><span class="material-symbols-outlined" style="font-size:14px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:32px;height:32px"><span class="material-symbols-outlined" style="font-size:18px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:40px;height:40px"><span class="material-symbols-outlined" style="font-size:22px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:56px;height:56px"><span class="material-symbols-outlined" style="font-size:32px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:24px;height:24px"><span class="material-symbols-outlined" style="font-size:14px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:32px;height:32px"><span class="material-symbols-outlined" style="font-size:18px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:40px;height:40px"><span class="material-symbols-outlined" style="font-size:22px">info</span></div>
<div class="inline-flex items-center justify-center rounded-full bg-info text-info-foreground" style="width:56px;height:56px"><span class="material-symbols-outlined" style="font-size:32px">info</span></div> Statuses
Seis variantes — duas neutras (primary/secondary) e quatro semânticas.
<FeedbackIcon status="default-primary" />
<FeedbackIcon status="default-secondary" />
<FeedbackIcon status="success" />
<FeedbackIcon status="alert" />
<FeedbackIcon status="error" />
<FeedbackIcon status="loading" />
<FeedbackIcon status="default-primary" />
<FeedbackIcon status="default-secondary" />
<FeedbackIcon status="success" />
<FeedbackIcon status="alert" />
<FeedbackIcon status="error" />
<FeedbackIcon status="loading" /> Ícone customizado
Override do Material Symbol default por status.
<FeedbackIcon status="default-primary" icon="favorite" />
<FeedbackIcon status="default-secondary" icon="schedule" />
<FeedbackIcon status="success" icon="verified" />
<FeedbackIcon status="default-primary" icon="favorite" />
<FeedbackIcon status="default-secondary" icon="schedule" />
<FeedbackIcon status="success" icon="verified" /> Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
status | 'default-primary' | 'default-secondary' | 'success' | 'alert' | 'error' | 'loading' | 'default-secondary' | Variante semântica. |
size | 24 | 32 | 40 | 56 | 32 | Tamanho em px. |
icon | string | por status | Material Symbol custom. |
ariaLabel | string | — | Acessibilidade quando ícone for decorativo. |
class | string | — | Classes adicionais. |