Pillar UI React Link Component documentation

Props

Size

• Type: string
• Default: md
• Options: 2xs | xs | sm | md | lg | xl | 2xl

The size prop controls the size of the text. The following values are valid:

Example:

<Link size="xs">Some text.</Link>
<Link size="sm">Some text.</Link>
<Link size="md">Some text.</Link>
<Link size="lg">Some text.</Link>
<Link size="xl">Some text.</Link>
<Link size="2xl">Some text.</Link>

Weight

The weight prop controls the weight (boldness) of the text. The following values are valid:

Example:

<Link weight="thin">Some text.</Link>
<Link weight="extra-light">Some text.</Link>
<Link weight="normal">Some text.</Link>
<Link weight="bold">Some text.</Link>
<Link weight="extra-bold">Some text.</Link>

Truncate

The truncate prop with the value of "multiline" will truncate the text if it exceeds the specified numberLine prop value and will display an ellipsis at the end of the last visible line. On the other hand, if the truncate prop value is "singleline", it will truncate the text to fit within a single line and display an ellipsis at the end of the truncated text.

truncate (optional): Determines whether the text should be truncated and how it should be truncated. If the value is "singleline", the text will be truncated to fit within a single line and display an ellipsis at the end of the truncated text. If the value is "multiline", the text will be truncated if it exceeds the specified numberLine prop value and display an ellipsis at the end of the last visible line.

Example:

export function LinkTrucates() {
  return (
    <div className="l_f-md">
      <Link size="3xl" truncate="1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
      <Link size="3xl" truncate="2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
      <Link size="3xl" truncate="3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
      <Link size="3xl" truncate="4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>

      <Link size="3xl" truncate="5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>

      <Link size="3xl">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
    </div>
  )
}

Align

This property specifies the horizontal alignment of the text within the parent element. It can take one of the following values:

• start: The text is aligned to the left (default).
• center: The text is centered horizontally.
• end: The text is aligned to the right.

Example:

export function LinkAligns() {
  return (
    <div className="l_flow">
      <Link align="start">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
      <Link align="center">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
      <Link align="end">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
    </div>
  )
}

Color

• Type: string
• Default: primary
• Options: danger | warning | success | primary | bgcece | primary | secondary

The color prop sets the color of the text .The contrast prop adjusts the contrast between heading text and its background. The default ensures high contrast for optimal readability. Using the low prop reduces contrast, which can impact accessibility for some users.

Example:

export function LinkColors() {
  return (
    <div className="l_flow">
      <Link color="dan">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
      </Link>
      <Link color="sec">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
      </Link>
      <Link color="suc">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
      </Link>
      <Link color="war">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
      </Link>
      <Link color="pri">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
      </Link>
      <Link color="bgcece">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
      </Link>

      <Link color="dan" low>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
      </Link>
      <Link color="sec" low>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
      </Link>
      <Link color="suc" low>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
      </Link>
      <Link color="war" low>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
      </Link>
      <Link color="pri" low>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
      </Link>
      <Link color="bgcece" low>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
      </Link>
    </div>
  )
}

Leading

you can customize the leading (line height) of your text by using the leading prop. This prop accepts four different values: "normal", "sm", "md", and "lg"

Example

<Link leading="normal">
  This text has a normal line height.
</Link>
<Link leading="sm">
  This text has a small line height.
</Link>
<Link leading="md">
  This text has a medium line height.
</Link>
<Link leading="lg">
  This text has a large line height.
</Link>

By using the leading prop, you can easily adjust the line height of your text to create a more visually appealing design.

dir RTL language

"dir": This prop sets the direction of the text within the component. It accepts the values "rtl" for right-to-left direction or "ltr" for left-to-right direction. This prop is useful when displaying text in languages that are read from right to left, such as Arabic or Hebrew.

export function LinkRTL() {
  return (
    <div className="l_flow">
      <Link dir="rtl">
        مُرَاكُش اموراكوش، «أرض الله») تسمى أيضًا بالمدينة الحمراء وعاصمة النخيل، هي ثالث أكبر مدينة في المملكة المغربية
        من ناحية عدد السكان. وهي عاصمة جهة مراكش آسفي. تقع مراكش على بعد 580 كم (360 ميل) جنوب شرق طنجة، 327 كم (203
        ميل) جنوب شرق العاصمة المغربية الرباط، 239 كم (149 ميل) جنوب شرق الدار البيضاء، و 246 كم (153 ميل) شمال شرق
        أكادير.
      </Link>
      <Link dir="rtl">ללמוד לקוד זה אחד הדברים הכי טובים שאני עושה כל חיי</Link>
      <Link dir="rtl">ކޯޑް ކުރަން ދަސްކުރުމަކީ އަހަރެންގެ މުޅި އުމުރުގައި ވެސް ކުރި އެންމެ ރަނގަޅު ކަމެކެވެ</Link>
    </div>
  )
}

Use Case

The Link component can be used to display text in various sizes and weights.

Troubleshooting

If the text is not displaying as expected, make sure that the correct props are being used and that any necessary styles are applied.

Conclusion

The Link component is a versatile component that can be used to display text in various sizes and weights with full accessibility and TypeScript support.