Link

Component to render text as clickable links.
Supports custom styling, nested text, and full customization via props.

Usage

View Docs

function LinkUsage() {
  return (
    <View>
      <Link
        title="View Docs"
        href="https://docs-react-native-blossom-ui.vercel.app/"
      />
    </View>
  )
}

With Text

Use the leftText & rightText prop to render inline text as prefix/suffix alongside the link. It could be a string or a Text component or any ReactNode of your choice.

Explore

Documentation

of Blossom UI

Don't have an account?

Create Account

Click here

to view more

function LinkWithText() {
  return (
    <View>
      <Link
        leftText="Explore"
        title="Documentation"
        rightText="of Blossom UI"
        href="https://docs-react-native-blossom-ui.vercel.app/"
      />
      <Link
        leftText="Don't have an account?"
        title="Create Account"
        href="https://google.com"
      />
      <Link
        title="Click here"
        rightText="to view more"
        href="https://google.com"
      />
    </View>
  )
}

Custom

Demonstrates fully customizable links with custom styles, colors, and behaviors.

Awesome

Blossom UI

Library

function LinkCustom() {
  return (
    <View>
      <Link
        leftText={<Text status="warning">Awesome </Text>}
        rightText={<Text status="success">Library</Text>}
        title="Blossom UI "
        href="https://docs-react-native-blossom-ui.vercel.app/"
        style={{
          color: 'blue',
        }}
      />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	TextProps	--	Inherits properties from TextProps
leftText	ReactNode	--	Set the left side of the textIf string will be passed a space delimiter will be added automatically at the end
rightText	ReactNode	--	Set the right side of the textIf string will be passed a space delimiter will be added automatically at the start
title	string	--	Set the link label to show
style	StyleProp<TextStyle>	--	Set the link label style
href	string	--	Set the href url for link
containerStyle	StyleProp<ViewStyle>	--	Container style for the link
onLinkOpenError	(error: unknown) => void	--	Callback for when the given link can't be opened
typography	TypographyOptions	b3	Modify the font size/weight values using this- h1-h6 are used for headings - s1-s3 are used for subheadings - b1-b3 are used for body text - l1-l3 are used for labels - c1-c3 are used for captions