Overview

Introduction

UsageComing soon

Theme

Layout

Box

ContainerComing soon

Flex

Grid

SectionComing soon

Typography

Components

BlockquoteComing soon

ComboboxComing soon

JSON Path SelectorComing soon

ZoomableComing soon

Formatting

CodeComing soon

EmComing soon

KbdComing soon

QuoteComing soon

StrongComing soon

Icons

Logo IconComing soon

Feature IconComing soon

Provider Icon

Icon Panel

Navigation

Page NavComing soon

Quick NavComing soon

Utilities

DS ProviderComing soon

Recipes

Copy Button

Copy Chip

Theme Toggle

Permanent Link

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

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

Props

`href`

required

string

`label`

required

string

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Usage

Basic Usage

A basic permanent link wrapping a heading.

 <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.

 <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.

 <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>

Permanent Link

On this page

Props

`href`

`label`

Usage

Basic Usage

With Different Content

In Documentation

Variants