Clickable

Turns non-interactive phrasing content into one button or link target. Use `ClickableContainer` instead when the content contains independent interactive descendants.

Examples

Action

Engineering

<Clickable
  label="Select Engineering"
  onClick={() => {}}
>
  <Badge color="info" label="Engineering" />
</Clickable>

With Tooltip

Engineering

Click to select the Engineering team

<Clickable
  label="Select Engineering"
  onClick={() => {}}
  tooltip="Click to select the Engineering team"
>
  <Badge color="info" label="Engineering" />
</Clickable>

Link

Engineering

<Clickable
  label="View Engineering team"
  onClick={undefined}
  href="/teams/engineering"
>
  <Badge color="info" label="Engineering" />
</Clickable>

Custom Link

Design

<Clickable
  label="View Design team"
  onClick={undefined}
  as={RouterLink}
  href="/teams/design"
>
  <Badge color="purple" label="Design" />
</Clickable>

States

Enabled

Disabled

You do not have access to this team

Read only

<HStack align="center" gap={4}>
  <Clickable label="Enabled" onClick={() => {}}>
    <Badge color="success" label="Enabled" />
  </Clickable>
  <Clickable
    disabledReason="You do not have access to this team"
    isDisabled
    label="Disabled"
    onClick={() => {}}>
    <Badge color="neutral" label="Disabled" />
  </Clickable>
  <Clickable isReadOnly label="Read only" onClick={() => {}}>
    <Badge color="warning" label="Read only" />
  </Clickable>
</HStack>

Custom Radius

Rounded

<Clickable
  label="Select rounded item"
  onClick={() => {}}
  style={{borderRadius: 9999}}
>
  <Badge color="teal" label="Rounded" />
</Clickable>

ClickableContainer examples

Action

Quarterly reportUpdated a few minutes ago

<ClickableContainer
  className={surfaceClassName}
  label="Open quarterly report"
  onClick={() => {}}
  style={{borderRadius: 12}}
>
  {( <VStack gap={1}> <Text type="label">Quarterly report</Text> <Text color="secondary" type="supporting"> Updated a few minutes ago </Text> </VStack> )}
</ClickableContainer>

Link Surface

Quarterly reportUpdated a few minutes ago

<ClickableContainer
  className={surfaceClassName}
  label="Open quarterly report"
  onClick={undefined}
  style={{borderRadius: 12}}
  href="/reports/quarterly"
>
  {( <VStack gap={1}> <Text type="label">Quarterly report</Text> <Text color="secondary" type="supporting"> Updated a few minutes ago </Text> </VStack> )}
</ClickableContainer>

Nested Controls

ApolloNested controls remain independent from the row action.

Archive projectSettings

<ClickableContainer
  className={surfaceClassName}
  href="/projects/apollo"
  label="Open Apollo project"
  style={{borderRadius: 12}}>
  <VStack gap={3}>
    <VStack gap={1}>
      <Text type="label">Apollo</Text>
      <Text color="secondary" type="supporting">
        Nested controls remain independent from the row action.
      </Text>
    </VStack>
    <HStack align="center" gap={3}>
      <Button label="Archive project" onClick={() => {}} size="sm" />
      <Link href="/projects/apollo/settings">Settings</Link>
    </HStack>
  </VStack>
</ClickableContainer>

States

Disabled surface

The report is still being generated

Read-only surface

<HStack align="start" gap={4} wrap="wrap">
  <ClickableContainer
    className={surfaceClassName}
    disabledReason="The report is still being generated"
    isDisabled
    label="Open pending report"
    onClick={() => {}}
    style={{borderRadius: 12}}>
    <Text type="label">Disabled surface</Text>
  </ClickableContainer>
  <ClickableContainer
    className={surfaceClassName}
    isReadOnly
    label="Read-only report"
    onClick={() => {}}
    style={{borderRadius: 12}}>
    <Text type="label">Read-only surface</Text>
  </ClickableContainer>
</HStack>

API

Clickable

Turns non-interactive phrasing content into one button or link target. Use `ClickableContainer` instead when the content contains independent interactive descendants.

Prop	Type	Default	Description
as	LinkComponent	—	Custom link component used when href is provided. This overrides the component configured by LinkProvider for this instance.
ref	Ref<HTMLElement>	—	Ref forwarded to the rendered button, link, or static span.
tooltip	ReactNode	—	Content shown in a tooltip during normal interaction. When the action is disabled, a non-empty disabledReason takes precedence.
children*	ReactNode	—	Non-interactive phrasing content that becomes the action's visual target.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
disabledReason	string	—	Explanation shown in a tooltip and exposed as the control's accessible description while disabled.
href	string	—	Navigation URL. When provided, the action renders as a link and takes precedence over onClick.
isDisabled	boolean	false	Whether the action is disabled. Disabled actions remain focusable and use aria-disabled so their reason can be discovered.
isReadOnly	boolean	false	Whether to preserve the content's appearance while removing interaction.
label*	string	—	Accessible name for the action. It is not rendered visually.
onClick	MouseEventHandler<HTMLElement>	—	Called when the action is activated. Also fires for link clicks when href is provided.
rel	string	—	Link relationship. noopener noreferrer are added for _blank targets.
style	CSSProperties	—	Inline styles applied to the root element.
target	string	'_self'	Link browsing-context target.

ClickableContainer

Prop	Type	Default	Description
ref	Ref<HTMLDivElement>	—	Ref forwarded to the outer, non-interactive container.
children*	ReactNode	—	Non-interactive phrasing content that becomes the action's visual target.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
disabledReason	string	—	Explanation shown in a tooltip and exposed as the control's accessible description while disabled.
href	string	—	Navigation URL. When provided, the action renders as a link and takes precedence over onClick.
isDisabled	boolean	false	Whether the action is disabled. Disabled actions remain focusable and use aria-disabled so their reason can be discovered.
isReadOnly	boolean	false	Whether to preserve the content's appearance while removing interaction.
label*	string	—	Accessible name for the action. It is not rendered visually.
onClick	MouseEventHandler<HTMLElement>	—	Called when the action is activated. Also fires for link clicks when href is provided.
rel	string	—	Link relationship. noopener noreferrer are added for _blank targets.
style	CSSProperties	—	Inline styles applied to the root element.
target	string	'_self'	Link browsing-context target.