Anatomy
|
Item |
Name |
Description |
Optional |
|---|---|---|---|
|
1 |
Text |
Text content that provides context for the link. |
- |
|
2 |
Icon |
A supporting icon to illustrate an external destination. |
Yes |
Specification and properties
Standalone
Links can function as standalone elements or be integrated within text. In Figma, we only have the Standalone Link as a component, while in code, the standalone is represented as a property.
|
Item |
Value |
Usage |
|---|---|---|
|
1 |
True |
Used independently as part of the layout. |
|
2 |
False |
Functions as an inline link within a sentence or paragraph. It follows text styling and does not support icons to maintain readability. |
Inherit
Available in code only, this property adopts the surrounding text style and seamlessly blends into the content. It is only applicable when the standalone property is set to false.
Variants
Links have different variants that help define the importance and visual integration of the link within the content.
|
Item |
Variant |
Description |
|---|---|---|
|
1 |
Primary |
The default variant, with the primary text color. Used for links that require emphasis. |
|
2 |
Basic |
It uses a secondary text color for less prominent links. |
States
|
Item |
State |
Description |
|---|---|---|
|
1 |
Default |
The default style before user interaction. |
|
2 |
Hover |
Indicates interactivity when the user hovers over the Link. |
|
3 |
Active |
Indicates the state when the user clicks or presses the Link. |
Disabled
A link set to disabled appears on the page but is inactive and cannot be clicked or interacted with.
Strong
It controls the emphasis of a link, making it more prominent. It applies only to standalone links.
|
|
Type |
Usage |
|---|---|---|
|
1 |
False |
It uses a stronger font weight to give more emphasis to the link. Applies only to standalone links. |
|
2 |
True |
It uses regular font weight for less relevant actions. |
Spacing
|
Property |
Value |
Token |
|---|---|---|
|
Gap |
8px |
spacing.100 |