Button Link
Link-styled interactive elements that combine button functionality with hyperlink visual presentation for consistent inline action and navigation triggers.
On this page
This documentation is a work in progress and may contain incomplete or outdated
information. If you have any feedback or suggestions, please open an issue on GitHub.
Tokens
Standardized design system values that define consistent visual properties across link button components. These tokens ensure visual coherence while enabling flexible theme customization and brand adaptation.
Theming Tokens
Design tokens organized by category with color-coded labels indicating their scope and impact level. Each token includes detailed specifications with values, usage guidelines, and customization options.
Legend:
- Granular tokens that affect only this component.
- Granular tokens that affect other components.
- Semantic tokens that affect the whole application.
- Base tokens that affect the whole application.
Color
Color tokens are listed for the default context variant only. Other context variants follow the same token pattern with variant-specific color values.
- context:
- default
| Component Token | Base Token |
|---|---|
| color.context.default.transparent-color | {color.base.context.light.default.transparent-color} |
| color.context.default.link-main | {color.base.context.light.default.link-main} |
| color.context.default.link-hover | {color.base.context.light.default.link-hover} |
| color.context.default.link-active | {color.base.context.light.default.link-active} |
| color.context.default.fg-slight | {color.base.context.light.default.fg-slight} |
Typography
| Component Token | Base Token |
|---|---|
| font.button.large | {font.text.large.strong} |
| font.button.medium | {font.text.medium.strong} |
| font.button.small | {font.text.small.strong} |
Sizing
| Component Token | Base Token |
|---|---|
| size.button.medium-main | {size.unit.40} |
| size.button.medium-icon | {size.unit.24} |
| size.button.medium-caret | {size.unit.20} |
| size.button.large-main | {size.unit.48} |
| size.button.large-icon | {size.unit.28} |
| size.button.large-caret | {size.unit.24} |
| size.button.small-main | {size.unit.32} |
| size.button.small-icon | {size.unit.20} |
| size.button.small-caret | {size.unit.16} |
Spacing
| Component Token | Base Token |
|---|---|
| space.button.large-padding-y | {space.unit.10} |
| space.button.large-padding-x | {space.unit.16} |
| space.button.large-gap | {space.unit.12} |
| space.button.large-nudge | {space.unit.4} |
| space.button.medium-padding-y | {space.unit.8} |
| space.button.medium-padding-x | {space.unit.12} |
| space.button.medium-gap | {space.unit.8} |
| space.button.medium-nudge | {space.unit.4} |
| space.button.small-padding-y | {space.unit.6} |
| space.button.small-padding-x | {space.unit.8} |
| space.button.small-gap | {space.unit.4} |
| space.button.small-nudge | {space.unit.4} |
Border Radius
| Component Token | Base Token |
|---|---|
| borderRadius.button.large | {borderRadius.context.medium} |
| borderRadius.button.medium | {borderRadius.context.medium} |
| borderRadius.button.small | {borderRadius.context.medium} |
Asset
| Component Token | Token Value |
|---|---|
| icon.button.caret | <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentcolor' class='icon-chevron-down-solid' viewBox='0 0 24 24'><path d='M11.1016 17.8984L3.60156 10.3984C3.09375 9.92969 3.09375 9.10938 3.60156 8.64062C4.07031 8.13281 4.89062 8.13281 5.35938 8.64062L12 15.2422L18.6016 8.64062C19.0703 8.13281 19.8906 8.13281 20.3594 8.64062C20.8672 9.10938 20.8672 9.92969 20.3594 10.3984L12.8594 17.8984C12.3906 18.4062 11.5703 18.4062 11.1016 17.8984Z'/></svg> |