Nav Icon — Sinapse Design System

Em cada stack

HTML e Astro: Classes itps-* do CSS Sinapse, com todas as variantes desta página.
React e Vue: Composição com o Button Sinapse; as variantes itps-* desta página existem só no HTML.

import { IconCode, IconLayoutGrid, IconPalette } from "@tabler/icons-react";

import { Button } from "@/components/ui/button";

export function NavLinks() {
  return (
    <nav className="flex flex-wrap items-center gap-2" aria-label="Navegação principal">
      <Button asChild variant="ghost" size="sm">
        <a href="/estilos">
          <IconPalette className="size-4" aria-hidden="true" />
          Estilos
        </a>
      </Button>

      <Button asChild variant="ghost" size="sm">
        <a href="/componentes">
          <IconLayoutGrid className="size-4" aria-hidden="true" />
          Componentes
        </a>
      </Button>

      <Button asChild variant="ghost" size="sm">
        <a href="/comecar">
          <IconCode className="size-4" aria-hidden="true" />
          Comece por aqui
        </a>
      </Button>
    </nav>
  );
}

<script setup lang="ts">
import { IconCode, IconLayoutGrid, IconPalette } from "@tabler/icons-vue";

import { Button } from "@/components/ui/button";
</script>

<template>
  <nav class="flex flex-wrap items-center gap-2" aria-label="Navegação principal">
    <Button as-child variant="ghost" size="sm">
      <a href="/estilos">
        <IconPalette class="size-4" aria-hidden="true" />
        Estilos
      </a>
    </Button>

    <Button as-child variant="ghost" size="sm">
      <a href="/componentes">
        <IconLayoutGrid class="size-4" aria-hidden="true" />
        Componentes
      </a>
    </Button>

    <Button as-child variant="ghost" size="sm">
      <a href="/comecar">
        <IconCode class="size-4" aria-hidden="true" />
        Comece por aqui
      </a>
    </Button>
  </nav>
</template>

<nav class="flex flex-wrap items-center gap-2" aria-label="Navegação principal">
  <a href="/estilos" class="inline-flex h-9 items-center gap-2 rounded-full px-3 text-sm font-medium text-foreground transition-colors hover:bg-secondary hover:text-brand-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
    <i class="itps-nav-icon ti ti-palette" aria-hidden="true"></i>
    <span>Estilos</span>
  </a>

  <a href="/componentes" class="inline-flex h-9 items-center gap-2 rounded-full px-3 text-sm font-medium text-foreground transition-colors hover:bg-secondary hover:text-brand-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
    <i class="itps-nav-icon ti ti-layout-grid" aria-hidden="true"></i>
    <span>Componentes</span>
  </a>

  <a href="/comecar" class="inline-flex h-9 items-center gap-2 rounded-full px-3 text-sm font-medium text-foreground transition-colors hover:bg-secondary hover:text-brand-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
    <i class="itps-nav-icon ti ti-code" aria-hidden="true"></i>
    <span>Comece por aqui</span>
  </a>
</nav>

Instalação

O comando instala o Button Sinapse com o tema Sinapse. Configure o registry uma vez por projeto em Comece por aqui.

terminal · React/Next

pnpm dlx shadcn@latest add @sinapse/nav-icon

terminal · Vue 3/Nuxt 4

pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/nav-icon.json

Sem shadcn, não há instalação por componente: use o CSS Sinapse e as classes da API copy-first desta página.

Uso

Use itps-nav-icon como classe visual para Tabler Icons decorativos em links, botões e itens de navegação. O texto da ação deve aparecer ao lado do ícone ou estar no controle por aria-label.

Em React/Next com shadcn/ui e Vue 3/Nuxt 4 com shadcn-vue, use Button como componente primitivo interativo e ícones Tabler (@tabler/icons-react ou @tabler/icons-vue). Para HTML ou wrappers finos, use itps-nav-icon no i.ti da webfont Tabler.

Exemplos

Ícone isolado

Quando o controle tem apenas ícone, o nome acessível fica no próprio button ou a. Em shadcn, use Button com size="icon" e asChild/as-child quando o destino for link.

import { IconLayoutGrid, IconMenu2, IconMoon } from "@tabler/icons-react";

import { Button } from "@/components/ui/button";

export function NavActions() {
  return (
    <div className="inline-flex items-center gap-2" role="group" aria-label="Ações de navegação">
      <Button variant="ghost" size="icon" aria-label="Abrir menu">
        <IconMenu2 className="size-4" aria-hidden="true" />
      </Button>

      <Button asChild variant="ghost" size="icon">
        <a href="/componentes" aria-label="Ver componentes">
          <IconLayoutGrid className="size-4" aria-hidden="true" />
        </a>
      </Button>

      <Button variant="ghost" size="icon" aria-label="Alternar tema">
        <IconMoon className="size-4" aria-hidden="true" />
      </Button>
    </div>
  );
}

<script setup lang="ts">
import { IconLayoutGrid, IconMenu2, IconMoon } from "@tabler/icons-vue";

import { Button } from "@/components/ui/button";
</script>

<template>
  <div class="inline-flex items-center gap-2" role="group" aria-label="Ações de navegação">
    <Button variant="ghost" size="icon" aria-label="Abrir menu">
      <IconMenu2 class="size-4" aria-hidden="true" />
    </Button>

    <Button as-child variant="ghost" size="icon">
      <a href="/componentes" aria-label="Ver componentes">
        <IconLayoutGrid class="size-4" aria-hidden="true" />
      </a>
    </Button>

    <Button variant="ghost" size="icon" aria-label="Alternar tema">
      <IconMoon class="size-4" aria-hidden="true" />
    </Button>
  </div>
</template>

<div class="inline-flex items-center gap-2" role="group" aria-label="Ações de navegação">
  <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-secondary hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="Abrir menu">
    <i class="itps-nav-icon itps-nav-icon--sm ti ti-menu-2" aria-hidden="true"></i>
  </button>

  <a href="/componentes" class="inline-flex h-10 w-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-secondary hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="Ver componentes">
    <i class="itps-nav-icon ti ti-layout-grid" aria-hidden="true"></i>
  </a>

  <button type="button" class="inline-flex h-12 w-12 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-secondary hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="Alternar tema">
    <i class="itps-nav-icon itps-nav-icon--lg ti ti-moon" aria-hidden="true"></i>
  </button>

  <button type="button" class="inline-flex h-14 w-14 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-secondary hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="Abrir painel">
    <i class="itps-nav-icon itps-nav-icon--xl ti ti-layout-sidebar-right" aria-hidden="true"></i>
  </button>
</div>

API copy-first

Classe/atributo	Uso
`itps-nav-icon`	Classe base para o `i.ti`; herda cor por `currentColor`.
`itps-nav-icon--sm`	Ajusta o ícone para 16px.
`itps-nav-icon--lg`	Ajusta o ícone para 24px.
`itps-nav-icon--xl`	Ajusta o ícone para 32px.
`ti ti-<nome>`	Nome do ícone Tabler distribuído pela webfont do sistema.
`aria-hidden="true"`	Esconde ícones decorativos de tecnologias assistivas.
`aria-label`	Nomeia controles somente com ícone.
`button`	Representa ações de interface.
`a`	Representa navegação real para outra URL.

Acessibilidade

Marque ícones decorativos com aria-hidden="true". Em links com texto visível, o texto é o nome acessível; o ícone não precisa ser anunciado. Em botões ou links somente com ícone, defina aria-label no elemento interativo. Use button para ações e a para navegação.