Feedback Icon — Sinapse Design System

Sizes

Quatro tamanhos canônicos: 24, 32, 40, 56 px.

<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>

<>
<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>

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" />

Í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" />

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.