Link · Glowup

Glowup

DATA DISPLAY · 58 / 89

Link

Link — a Material You data display component for React Native and web.

󱀫

packages/ui/src/components/Link.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Material Design 3

󰏌

Properties

4 controls

Label

Href

Underline

Disabled

Usage

Link.tsx

<Link> Material Design 3 </Link>

Variants

The states and shapes this component is meant to be used in.

Underline

Always underlined

󰏌

Underlined on hover (default)

󰏌

Never underlined

󰏌

In prose

Every colour and type role in this library follows the Material 3 spec.

Read the colour-role reference

󰏌

Variants

titleMedium, in-app press handler

bodySmall

Disabled

󰏌

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

14 on LinkProps

Filter props

󰍉

children

required

string

accessibilityLabel

string

allowedSchemes

string[]

default: DEFAULT_SCHEMES

URL schemes `href` may use. A link whose `href` came from data (a user's website, a CMS field) must not be able to open `javascript:`, `intent:` or another app's deep link. Add your own app's scheme here to deep-link. Defaults to `["http", "https", "mailto", "tel"]`.

color

string

disabled

boolean

externalIcon

MaterialCommunityIconsGlyphs

default: "open-in-new"

href

string

Opened with `Linking.openURL`. Ignored when `onPress` is given, and when its scheme is not in `allowedSchemes` — then the link does nothing.

onPress

() => void

showExternalIcon

boolean

Appends an external-link icon. Defaults to `true` when `href` is remote.

style

StyleProp<ViewStyle>

testID

string

textStyle

StyleProp<TextStyle>

underline

"always" | "hover" | "none"

default: "hover"

Underline behaviour. Defaults to `"hover"`.

variant

keyof Theme["typography"]

default: "bodyMedium"

M3 typography variant for the label. Defaults to `"bodyMedium"`.