Anchorpolymorphic

Display links with theme styles
Import

Usage

Anchor is a wrapper around Text component with component prop set to a by default. It supports the same props as Text component.

import { Anchor } from '@mantine/core';
function Demo() {
return (
<Anchor href="https://mantine.dev/" target="_blank">
Mantine docs
</Anchor>
);
}

Polymorphic component

Anchor is a polymorphic component, you can change root element:

import { Anchor } from '@mantine/core';
function Demo() {
return (
<Anchor component="button" type="button">
Anchor as button
</Anchor>
);
}

Anchor component props

NameTypeDescription
align
"left" | "right" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "start" | "justify" | "match-parent"
Sets text-align css property
children
ReactNode
Text content
color
DefaultMantineColor | "dimmed"
Key of theme.colors or any valid CSS color
gradient
MantineGradient
Controls gradient settings in gradient variant only
inherit
boolean
Inherit font properties from parent element
inline
boolean
Sets line-height to 1 for centering
italic
boolean
Adds font-style: italic style
lineClamp
number
CSS -webkit-line-clamp property
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.fontSizes or number to set font-size in px
span
boolean
Shorthand for component="span"
strikethrough
boolean
Add strikethrough styles
transform
"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase"
Sets text-transform css property
truncate
true | "end" | "start"
CSS truncate overflowing text with an ellipsis
underline
boolean
Underline the text
variant
"link" | "text" | "gradient"
Link or text variant
weight
FontWeight
Sets font-weight css property