Link

Usage

View Docs

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

With Text

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

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 text
rightText	ReactNode	--	Set the left side of the text
title	string	--	Set the link label to show
href	string	--	Set the href url for link
typography	TypographyOptions	b2	Typography option to control the size of the text