Brand

Brand combina uma marca gráfica com um wordmark opcional. Escolha um wordmark quando o texto puder nomear a marca; um Brand apenas com marca gráfica precisa de um nome acessível explícito.

Propriedade personalizada	Padrão	O que define
`--brand-mark-size`	`24px`	Largura e altura da marca gráfica. A prop `size` a define em pixels.

Exemplos

Marca gráfica e wordmark

Um wordmark fornece o nome que as pessoas veem e a tecnologia assistiva lê. href torna o elemento nativo uma âncora, então use-o para um destino inicial.

Lyra

Apenas marca gráfica

Uma marca gráfica não se descreve sozinha. Sem wordmark, aria-label é obrigatório para a marca ainda ter um nome acessível.

Renderizando por um link

asChild mantém seu link de roteamento como elemento renderizado. Ele e href são mutuamente exclusivos: o filho é dono do destino.

Lyra components

Quando usar

Use Brand onde a identidade de um produto precisar de sua marca gráfica e, havendo espaço, de seu nome. Ele renderiza as duas imagens de tema e o CSS escolhe uma com [data-theme], sem ler o tema em JavaScript.

Prefira outro componente quando:

A identidade é somente texto — use texto comum ou um cabeçalho; uma imagem de marca vazia não ajuda.
A marca é uma imagem decorativa no conteúdo — use img com a decisão correta de alt.

Acessibilidade

Um wordmark fornece o nome acessível por padrão. Um Brand só com marca gráfica renderiza role="img" e exige aria-label; o sistema de tipos rejeita sua ausência.
As imagens de Brand têm alt vazio porque o wordmark ou nome acessível nomeia toda a marca uma vez.
href renderiza uma âncora nativa. Com asChild, o filho deve continuar um link real, alcançável pelo teclado, com o próprio destino.
As marcas clara e escura estão ambas no DOM e o CSS oculta uma. Forneça arte equivalente para a troca de tema nunca mudar o nome ou significado do produto.

API e código

Nome	Tipo	Obrigatória	Descrição
`mark`	`string`	Obrigatória	Image source used for the light theme mark.
`markDark`	`string`	—	Optional image source used for the dark theme mark.
`size`	`number`	—	Mark edge length in pixels. Sets `--brand-mark-size`.
`children`	`ReactNode \| undefined \| ReactElement`	—	Wordmark content that gives the brand its accessible name. Omit the wordmark to render a mark-only brand. A child link or framework routing element containing the wordmark.
`'aria-label'`	`string`	—	Optional translated accessible name that overrides the wordmark text. Translated accessible name required when no wordmark is rendered.
`href`	`string \| never`	—	Destination rendered as an anchor. Mutually exclusive with `asChild`. Destination is provided by the child element when `asChild` is enabled.
`asChild`	`false \| true`	—	Render the native anchor or span. Render the single child element with the brand's props and classes merged.

Os exemplos usam assets desta documentação, então seus caminhos de imagem darão 404 no seu app. Troque-os pelos arquivos de marca clara e escura do seu produto ao copiar este markup:

html

<a class="lyra-brand" href="/">
  <img class="lyra-brand__mark lyra-brand__mark--light" src="/mark.svg" alt="" />
  <img class="lyra-brand__mark lyra-brand__mark--dark" src="/mark-light.svg" alt="" />
  <span class="lyra-brand__word">Acme</span>
</a>

<span class="lyra-brand" role="img" aria-label="Início da Acme">
  <img class="lyra-brand__mark" src="/mark.svg" alt="" />
</span>

<lyra:brand> Gerado do lyra-ds/blade v0.10.0.

Prop	Padrão	Obrigatória	Valores de exemplo
`mark`	—	Obrigatória	—
`markDark`	`null`	—	—
`size`	`null`	—	—
`href`	`null`	—	—

blade

<lyra:brand mark="/img/lyra-mark.svg" :size="24" href="/">Lyra</lyra:brand>