[ DESIGN SYSTEM ]

UI Component Playground

Ambiente interativo para testar componentes, variações de interface e padrões visuais.

DESIGN SYSTEMCOMPONENTSUI

Tipo

Biblioteca Visual

Ano

2025

Stack

React / Storybook

[ DEMONSTRAÇÃO INTERATIVA ]

[ BIBLIOTECA DE COMPONENTES ]

Variante

[ BOTÕES ]

Ações claras que guiam o usuário

Primary

<button className="
  border border-red
  text-red px-5 py-2
  hover:bg-red/10">
  Primary
</button>

Ghost

<button className="
  border border-white/20
  text-white/60 px-4 py-2
  hover:bg-white/5">
  Ghost
</button>

Destructive

<button className="
  border-red-500/40
  bg-red-500/8 text-red-400
  hover:bg-red-500/15">
  Destruir
</button>

Icon Button

<button className="
  w-9 h-9 rounded-lg
  border border-white/15
  flex items-center justify-center">
  <ArrowRight size={14} />
</button>

Loading State

<button disabled>
  <Loader2
    className="animate-spin" />
  Enviando...
</button>

Disabled

<button disabled
  className="opacity-40
    cursor-not-allowed
    border border-white/15">
  Inativo
</button>

[ PRÓXIMO PASSO ]

Quer algo assim?

MEZZOLD STUDIO