Anchorpolymorphic

Display links with theme styles

Import

Source

View source code

Docs

Edit this page

Package

@asuikit/core

Usage

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

Mantine docs

import { Anchor } from '@asuikit/core';

function Demo() {
  return (
    <Anchor href="https://srcalienswap.github.io/as-uikit/" target="_blank">
      Mantine docs
    </Anchor>
  );
}

Polymorphic component

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

import { Anchor } from '@asuikit/core';

function Demo() {
  return (
    <Anchor component="button" type="button">
      Anchor as button
    </Anchor>
  );
}

Go back

TransferList – @asuikit/core

Up next

Breadcrumbs – @asuikit/core

Anchor component props

Name	Type	Description
align	"left" \| "right" \| "center" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "unset" \| "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 any valid CSS value to set font-size
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
weight	FontWeight	Sets font-weight css property

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter