Luke UI
GitHub repository

Icon Link

An icon-only control for navigation.

IconLink navigates to another URL or route, shown as a compact icon-only control. Use Link when the destination needs visible text. Use IconButton for an action such as saving or deleting instead of a navigation.

Icon Link: Basic
Loading Icon Link: Basic example

Size

medium is the default. Use small for compact toolbars and dense row actions. Keep controls in a group at the same size.

Icon Link: Size
Loading Icon Link: Size example

Prominence

standard is the default. Choose low for quiet secondary destinations and high for a primary destination. High prominence uses the theme’s primary accent treatment.

Icon Link: Prominence
Loading Icon Link: Prominence example

Custom icons

Pass a decorative, non-interactive ReactElement to icon for a graphic outside the generated icon set, such as a brand mark. IconLink sizes the graphic to match its built-in icons.

Icon Link: Custom icon
Loading Icon Link: Custom icon example

Disabled

Set isDisabled when the destination is temporarily unavailable. Disabled controls cannot receive focus or respond to presses.

Icon Link: Disabled
Loading Icon Link: Disabled example

Accessibility

Provide aria-label or aria-labelledby for every icon link. Name the destination, not the icon. The icon itself, whether a built-in Icon or a custom graphic, contributes no accessible name, so the naming prop is required.

API

IconLinkProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Prop

Type