Pular para o conteúdo principal

Design System

GitHubTema escuro

Primeiros passos

Fundações

Componentes · Ações

Componentes · Formulários

Componentes · Feedback

Componentes · Sobreposições

Componentes · Navegação

Componentes · Exibição de dados

Componentes · Marca

Componentes · Ícones

Icons

Registro central de ícones da interface.

import { Icons } from '@onblide/ui';

Exemplos

Navegação

Carregando…

const Cel = ({ n, children }) => (
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, width: 72, fontSize: 11 }}>
    {children}<span>{n}</span>
  </div>
);

const Navegacao = () => (
  <div style={{ display: 'flex', gap: 12, padding: 16, flexWrap: 'wrap' }}>
    <Cel n="house"><Icons.house /></Cel>
    <Cel n="search"><Icons.search /></Cel>
    <Cel n="user"><Icons.user /></Cel>
    <Cel n="gear"><Icons.gear /></Cel>
    <Cel n="bell"><Icons.bell /></Cel>
    <Cel n="calendar"><Icons.calendar /></Cel>
    <Cel n="kanban"><Icons.kanban /></Cel>
    <Cel n="chart"><Icons.chart /></Cel>
  </div>
);

render(<Navegacao />);

Ações

Carregando…

const Cel = ({ n, children }) => (
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, width: 72, fontSize: 11 }}>
    {children}<span>{n}</span>
  </div>
);

const Acoes = () => (
  <div style={{ display: 'flex', gap: 12, padding: 16, flexWrap: 'wrap' }}>
    <Cel n="plus"><Icons.plus /></Cel>
    <Cel n="check"><Icons.check /></Cel>
    <Cel n="x"><Icons.x /></Cel>
    <Cel n="link"><Icons.link /></Cel>
    <Cel n="sync"><Icons.sync /></Cel>
    <Cel n="star"><Icons.star size={32} /></Cel>
    <Cel n="heart"><Icons.heart size={32} /></Cel>
  </div>
);

render(<Acoes />);