Navegar componentes

ClickableCard

CardExemplo

Card interativo para alvos de navegação ou ação. Elementos interativos aninhados funcionam de forma independente.

Importação

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

Exemplos

Área interativa

variant

isDisabled

Configurações do projeto

Gerencie equipe, cobrança e integrações.

Código

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

<ClickableCard
  label="Abrir configurações do projeto"
  variant="default"
  isDisabled={false}
 />

Boas práticas

Faça: Use para cards que navegam para uma página de detalhes ou disparam uma única ação.
Faça: Aninhe botões ou links livremente dentro; eles tratam seus próprios eventos.
Evite: Use para alternar seleção; use SelectableCard para isso.

Props

Prop	Tipo	Padrão	Descrição
`label` *	`string`	—	Rótulo de acessibilidade.
`onClick`	`(event: MouseEvent) => void`	—	Handler de clique: dispara apenas na superfície do card.
`href`	`string`	—	URL de navegação.
`target`	`string`	`'_self'`	Target do link.
`isDisabled`	`boolean`	`false`	Desabilita o card.
`children`	`ReactNode`	—	Conteúdo do card.
`padding`	`0 \| 0.5 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 5 \| 6 \| 8 \| 10`	`4`	Padding interno.
`variant`	`'default' \| 'transparent' \| 'muted' \| 'blue' \| 'cyan' \| 'gray' \| 'green' \| 'orange' \| 'pink' \| 'purple' \| 'red' \| 'teal' \| 'yellow'`	`'default'`	Variant de cor de fundo.
`elevation`	`'none' \| 'low' \| 'med' \| 'high'`	`'none'`	Profundidade de sombra em repouso. Frequentemente elevada para sinalizar que o card inteiro é clicável.
`width`	`SizeValue`	—	Largura do card.
`height`	`SizeValue`	—	Altura do card.
`maxWidth`	`SizeValue`	—	Largura máxima do card.
`xstyle`	`StyleXStyles`	—	Estilos StyleX para customizaçã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/ClickableCard