Nav Icon — Sinapse Design System

import { Code2, LayoutGrid, Palette } from "lucide-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">
          <Palette className="size-4" aria-hidden="true" />
          Estilos
        </a>
      </Button>

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

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

<script setup lang="ts">
import { Code2, LayoutGrid, Palette } from "lucide-vue-next";

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">
        <Palette class="size-4" aria-hidden="true" />
        Estilos
      </a>
    </Button>

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

    <Button as-child variant="ghost" size="sm">
      <a href="/comece-por-aqui">
        <Code2 class="size-4" aria-hidden="true" />
        Desenvolver
      </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 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 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="/comece-por-aqui" 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 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>Desenvolver</span>
  </a>
</nav>

Instalação

Instale o Button da sua stack para os controles interativos e rode o comando individual ITpS em seguida. O comando itps add nav-icon é theme-only: ele valida o slug e confirma que o contrato visual vem do tema ITpS, da classe copy-first e dos snippets desta página.

terminal · React/Next

pnpm dlx shadcn@latest add button
pnpm dlx github:ITPS/sinapse-ui-cli add nav-icon

terminal · Vue3/Nuxt4

pnpm dlx shadcn-vue@latest add button
pnpm dlx github:ITPS/sinapse-ui-cli add nav-icon

O comando individual adapta só este componente; não instala o catálogo inteiro.

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 Vue3/Nuxt4 com shadcn-vue, use Button como primitive interativo e ícones lucide-react ou lucide-vue-next. 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 { LayoutGrid, Menu, Moon } from "lucide-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">
        <Menu className="size-4" aria-hidden="true" />
      </Button>

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

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

<script setup lang="ts">
import { LayoutGrid, Menu, Moon } from "lucide-vue-next";

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">
      <Menu class="size-4" aria-hidden="true" />
    </Button>

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

    <Button variant="ghost" size="icon" aria-label="Alternar tema">
      <Moon 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.