Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Focus Trap
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Reduced Motion
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Link

Also known as a hyperlink, a link is a clickable (text or image) element used for navigation purposes.

installyarn add @clayui/link
version3.88.0
  • Examples
  • Markup
  • API

Stable3.88.0View in LexiconCHANGELOGstorybook demos

PropertyDescription
block
boolean
Renders the button as a block element.
borderless
boolean
Flag to indicate if link should be borderless.
button
| boolean | { block?: boolean; monospaced?: boolean; small?: boolean; }
Config for button props
decoration
'none' | 'underline' | null
Indicates if the text should be underlined
displayType
'danger' | 'primary' | 'secondary' | 'tertiary' | 'unstyled'
Determines how the link is displayed.
fontSize
Number
Sets the text size based on a number scale.
messages
{ opensNewWindow: string; }
Messages used for announcement to SR. Use this for internationalization.

The default value is { opensNewWindow: '(Opens a new window)', }
monospaced
boolean
Flag to indicate if the link should be monospaced.
outline
boolean
Flag to indicate if the link should use the outlined style.
small
boolean
Indicates whether the button should use the small variant.
weight
'normal' | 'semi-bold'
Determines the font-weight of the link.

How can this be improved? Create an issue!