Usage
Anchor is a wrapper around Text component with component
prop set to a
by default.
It supports the same props as Text component.
Polymorphic component
Anchor is a polymorphic component, you can change root element:
Anchor component props
Name | Type | Description |
---|---|---|
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 |