Navegar componentes

Tab

MiscExemplo

Item de aba individual que renderiza como botão ou link âncora, com estilização de estado selecionado e ícones opcionais.

Importação

import {Tab} from '@pharos-ds/core/Tab';

Exemplos

Ocultar rótulo

Código

import {Tab} from '@pharos-ds/core/Tab';

<Tab
  isLabelHidden={false}
 />

Prop	Tipo	Padrão	Descrição
`value` *	`string`	—	Valor único desta aba, correspondido a TabListContext.value.
`label` *	`string`	—	Rótulo acessível desta aba. Usado como texto visível por padrão ou como aria-label quando isLabelHidden é true.
`isLabelHidden`	`boolean`	`false`	Se o rótulo está oculto visualmente. Quando true, apenas o ícone e endContent são exibidos, e label é usado como aria-label para acessibilidade.
`href`	`string`	—	URL para navegar; quando fornecido, a aba renderiza como elemento anchor.
`as`	`LinkComponentType`	—	Componente personalizado a renderizar em vez de <a> para abas com link. Substitui o padrão do LinkProvider. Aplica-se apenas quando href é fornecido.
`icon`	`ReactNode`	—	Elemento de ícone exibido quando a aba não está selecionada.
`selectedIcon`	`ReactNode`	—	Elemento de ícone exibido quando a aba está selecionada; usa icon como fallback se não fornecido.
`endContent`	`ReactNode`	—	Conteúdo renderizado após o rótulo, como contagem em badge ou ponto de status.
`xstyle`	`StyleXStyles`	—	Estilos StyleX para personalização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(): não um objeto de estilo inline como style={{}}.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/Tab