Logo

Link

Links (#[Texto](Destino)) criam navegação inline para telas, modais ou URLs externas sem quebrar o fluxo de leitura.

Quando usar

  • Referenciar telas ou recursos secundários dentro de parágrafos e listas.
  • Direcionar para artigos, e-mails ou telefones externos ao ambiente Proto-Typed.
  • Oferecer caminhos alternativos enquanto o CTA principal permanece em botões.
  • Conectar seções relacionadas quando um navigator não é necessário.

Exemplo básico

Links em texto de suporte

Proto-Typed
Loading DSL editor...

Por quê: mantém a leitura fluida e oferece navegação contextual.

Variantes

Link interno para screen

Proto-Typed
Loading DSL editor...

Quando usar: apontar para telas existentes no fluxo principal. Por quê: mantém a navegação coesa sem depender de botões.

Link externo

Proto-Typed
Loading DSL editor...

Quando usar: referenciar recursos hospedados fora do produto. Por quê: direciona para documentação ou sites externos preservando contexto.

Composição (usando com outros)

  • Link + Card — oferece contextos adicionais dentro de blocos informativos.
  • Link + List — transforma itens em atalhos sem necessidade de botões.
  • Link + Drawer — agrupa links em painéis laterais de referência.

Drawer com links rápidos

Proto-Typed
Loading DSL editor...

Por quê: agrupa atalhos sem sobrecarregar o cabeçalho com botões.

Slots & Props

NomeTipoPadrãoDescriçãoObrigatório
labelstring—Texto exibido entre #[ ].Sim
destinoslug ou URL—Tela, modal, drawer ou endereço externo.Sim
protocolohttps://https://Determina a ação para links externos.Não
ícone inlinetoken i-—Opcional antes do texto para reforçar o contexto.Não

Erros comuns (Do/Don’t)

❌ Errado — Botão no lugar de link

Loading DSL editor...

✅ Correto — Link contextual

Loading DSL editor...

Por quê: @ executa ações; # referencia destinos sem comportamento de botão.

❌ Errado — Link sem destino

Loading DSL editor...

✅ Correto — Destino declarado

Loading DSL editor...

Por quê: cada link precisa apontar para um destino existente para evitar erros de navegação.

Referências cruzadas

Relacionados

  • Button: ações que executam lógica ou abrem fluxos.
  • Navigator: navegação estruturada por abas ou menus.
  • Drawer: agrupa links de referência lateralmente.
  • Screen: destino mais comum para links internos.

Composições recomendadas

  • Link + Card → blocos informativos com referências adicionais.
  • Link + List → coleções de atalhos sem usar botões.
  • Link + Drawer → catálogos laterais de documentação ou suporte.