ITpS

Componentes

Componentes

Building blocks da interface — combinam tokens (cor, spacing, radius, motion) em peças reutilizáveis e acessíveis.

Ações & Navegação

smart_button

Button

Ações primárias e secundárias

arrow_forward link

Link

Action link com seta indicadora

arrow_forward last_page

Pagination

Navegação entre páginas

arrow_forward navigate_next

Breadcrumb

Navegação hierárquica horizontal

arrow_forward tab

Tabs

Tablist com troca de panels

arrow_forward token

Nav Icon

Material Symbol ou brand SVG (vue/astro/react/nuxt)

arrow_forward

Forms

view_compact

Field

Wrapper de label + input + support/error

arrow_forward edit

TextField

Input pill com 8 estados

arrow_forward search

Search

Barra de busca pill full-width

arrow_forward arrow_drop_down_circle

Select

Combobox com listbox custom

arrow_forward check_box

Checkbox

Caixa quadrada multi-estado

arrow_forward toggle_on

Switch

Toggle on/off com inversão

arrow_forward

Feedback

campaign

Banner

Notification bar full-width 4 statuses

arrow_forward notifications

Toast

Notificação flutuante transient

arrow_forward feedback

Callout

Feedback box contido 3 sizes

arrow_forward check_circle

Feedback Icon

Círculo de status semântico 6 statuses

arrow_forward

Overlays

help

Tooltip

Info trigger com caixa flutuante

arrow_forward open_in_new

Modal

Dialog 800px com header/body/footer

arrow_forward right_panel_open

Side Panel

Drawer slide-in da direita

arrow_forward

Data Display

account_circle

Avatar

Agent — user / company / system

arrow_forward sell

Tag

Badge read-only de status (4 sizes × 5 statuses)

arrow_forward label

Chip

Filtros, tags e indicadores compactos

arrow_forward insights

Data Overlay

KPI card com header tinted e pin opcional

arrow_forward monitor_heart

Risk Classification

Widget Sinapse — KPI risco + análise

arrow_forward dashboard

Feature Card

CTA card horizontal title + descrição + ícone

arrow_forward

Layout

crop_square

Card

Container de conteúdo

arrow_forward view_agenda

Footer

Footer canônico produto Sinapse

arrow_forward waves

Wavy Divider

Divider decorativo SVG ondulado entre seções

arrow_forward