Quick Links

Permanent Link

A link component that provides a permanent URL reference to a section of content.

Example Section

 <PermanentLink href="#example" label="Copy link to this section">
  <Heading size="3">Example Section</Heading>
</PermanentLink>

API Reference

This component is based on the div element with an embedded anchor and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Prop	Type	Default
`href`	`string`	Required
`label`	`string`	Required

Examples

Basic Usage

A basic permanent link wrapping a heading.

Basic Usage Section

 <PermanentLink href="#basic-usage" label="Copy link to this section">
  <Heading size="3">Basic Usage Section</Heading>
</PermanentLink>

With Different Content

Permanent links can wrap various types of content.

Heading Example

Text Example

 <Flex direction="column" gap="4">
  <PermanentLink href="#heading-example" label="Copy link to heading">
    <Heading size="7">Heading Example</Heading>
  </PermanentLink>

  <PermanentLink href="#text-example" label="Copy link to text">
    <Text as="p" size="4" weight="bold">
      Text Example
    </Text>
  </PermanentLink>
</Flex>

In Documentation

Permanent links are commonly used in documentation to provide permalinks to sections.

Introduction

This is an introduction to the topic. The permanent link above allows readers to directly link to this section when sharing documentation.

Getting Started

Here's how to get started with the feature. The permanent link makes it easy to reference specific sections in tutorials or guides.

Advanced Usage

For advanced users, here are some additional tips and tricks. Having permanent links helps with navigation in lengthy documentation.

 <Box style={{ maxWidth: '600px' }}>
  <Flex direction="column" gap="4">
    <PermanentLink href="#introduction" label="Copy link to introduction">
      <Heading size="4">Introduction</Heading>
    </PermanentLink>
    <Text as="p" mb="4">
      This is an introduction to the topic. The permanent link above allows
      readers to directly link to this section when sharing documentation.
    </Text>

    <PermanentLink href="#getting-started" label="Copy link to getting started">
      <Heading size="4">Getting Started</Heading>
    </PermanentLink>
    <Text as="p" mb="4">
      Here's how to get started with the feature. The permanent link makes it
      easy to reference specific sections in tutorials or guides.
    </Text>

    <PermanentLink href="#advanced-usage" label="Copy link to advanced usage">
      <Heading size="4">Advanced Usage</Heading>
    </PermanentLink>
    <Text as="p">
      For advanced users, here are some additional tips and tricks. Having
      permanent links helps with navigation in lengthy documentation.
    </Text>
  </Flex>
</Box>