Link Component

Figma

The glu-link component is a flexible link element that supports different appearances and behaviors. It enables you to specify the URL via the href property, determine where to open the link using the target property, and set the relationship between the current document and the linked document with the rel attribute. Additionally, you can adjust the size of the link with the size property to match your design system.

Basic Usage

Example 1: Simple Link

HTML

Result

Loading...

Live Editor

<glu-link href="https://example.com">
  Visit Example
</glu-link>

React

Result

Loading...

Live Editor

<GluLink href="https://example.com">
  Visit Example
</GluLink>

Vue

<glu-link href="https://example.com">
  Visit Example
</glu-link>

<script setup>
import { GluLink } from '@gelato-ui/vue';
</script>

Angular

<glu-link href="https://example.com">
  Visit Example
</glu-link>

import { Component } from '@angular/core';
import { GluLink } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluLink],
  template: `<glu-link href="https://example.com">
               Visit Example
             </glu-link>`
})
export class MyComponent {}

---

Link with Target and Rel

Control the behavior of the link by setting the target and rel properties. For example, use target="_blank" to open the link in a new tab and include rel="noopener noreferrer" for security.

HTML

Result

Loading...

Live Editor

<glu-link href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</glu-link>

React

Result

Loading...

Live Editor

<GluLink href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</GluLink>

Vue

<glu-link href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</glu-link>

<script setup>
import { GluLink } from '@gelato-ui/vue';
</script>

Angular

<glu-link href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</glu-link>

import { Component } from '@angular/core';
import { GluLink } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluLink],
  template: `<glu-link href="https://example.com" target="_blank" rel="noopener noreferrer">
               Visit Example
             </glu-link>`
})
export class MyComponent {}

---

Link Sizes

The size property allows you to adjust the visual prominence of the link. Available sizes are small, medium (default), and large.

HTML

Result

Loading...

Live Editor

<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
  <glu-link href="https://example.com" size="small">
    Small Link
  </glu-link>
  <glu-link href="https://example.com" size="medium">
    Medium Link
  </glu-link>
  <glu-link href="https://example.com" size="large">
    Large Link
  </glu-link>
</div>

React

Result

Loading...

Live Editor

<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
  <GluLink href="https://example.com" size="small">
    Small Link
  </GluLink>
  <GluLink href="https://example.com" size="medium">
    Medium Link
  </GluLink>
  <GluLink href="https://example.com" size="large">
    Large Link
  </GluLink>
</div>

Vue

<div style="display: flex; flex-direction: column; gap: 1rem;">
  <glu-link href="https://example.com" size="small">
    Small Link
  </glu-link>
  <glu-link href="https://example.com" size="medium">
    Medium Link
  </glu-link>
  <glu-link href="https://example.com" size="large">
    Large Link
  </glu-link>
</div>

<script setup>
import { GluLink } from '@gelato-ui/vue';
</script>

Angular

<div style="display: flex; flex-direction: column; gap: 1rem;">
  <glu-link href="https://example.com" size="small">
    Small Link
  </glu-link>
  <glu-link href="https://example.com" size="medium">
    Medium Link
  </glu-link>
  <glu-link href="https://example.com" size="large">
    Large Link
  </glu-link>
</div>

import { Component } from '@angular/core';
import { GluLink } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluLink],
  template: `
    <div style="display: flex; flex-direction: column; gap: 1rem;">
      <glu-link href="https://example.com" size="small">
        Small Link
      </glu-link>
      <glu-link href="https://example.com" size="medium">
        Medium Link
      </glu-link>
      <glu-link href="https://example.com" size="large">
        Large Link
      </glu-link>
    </div>
  `
})
export class MyComponent {}

---

Properties

Property	Attribute	Description	Type	Default
href (required)	href	The URL that the hyperlink points to.	string	undefined
size	size	The size of the link.	"large" | "medium" | "small"	'medium'

---

Built with StencilJS