⌘ K
  • Design Principles
  • Design Framework
  • UX Laws
  • Colours
  • Typography
  • Layout Grids
  • Spacing & Radius
  • Shadow & Blur
Product Design Process
Accessibility Guideline
Content Voice
Marketing & Collaterals
  • Accordion
  • App Bar
  • Avatar
  • Badge
  • Button
  • Breadcrumb
  • Bottom Navigation
  • Carousel
  • Cards
  • Checkbox
  • Chip
  • Date Picker
  • Dropdown
  • Dialog
  • Divider
  • Floating Action Button
  • Footer
  • Header
  • Link
  • Loader
  • Menu
  • Pagination
  • Popover
  • Progress Bar
  • Radio Button
  • Search
  • Sidebar
  • Slider
  • Skeleton
  • Statistic
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag
  • Text Field
  • Timeline
  • Toast Message
  • Tooltip
  • Upload
  • Logos
  • System Icons
  • Visual Icons
  • Illustrations
  • Images
  • Tones
Templates
v 1.0
  • About Helix
  • For Designers
  • For Developers
  • Components
Link

Link

A link component allows users to navigate to different pages or sections without disrupting the current page state.

Usage

  • Go to a different page within the application.
  • Visit a completely different site.
  • Jump to an element within the same page.

Anatomy

The floating action button is encapsulated within a container and may contain an icon representing the action, alongside a text label providing additional information.

Avatar Anatomy

Sizes

Link have small, medium and large sizes.

Large

Default Link

Medium

Default Link

Small

Default Link

Specifications

Structure and spacing measurements for link.

Avatar Specifications

Live Demo

The Link is demonstrated in a live environment in this demo.

Storybook

Gain access to the component library by clicking here. (For developers)

Header
Loader

Helix - HDFC Life 2025