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 |