grommet
components

Anchor

a text link

Storybook
CodeSandbox

Props

a11yTitle

Custom title to be used by screen readers.
"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"
"center"
"end"
"stretch"

as

The DOM tag or react component to use for the element.
"string""function"

color

Label color and icon color, if not specified on the icon.
"accent-1"

disabled

Whether the anchor is disabled.
truefalse

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

href

Hyperlink reference to place in the anchor.
"//my.com/path"

icon

Icon element to place in the anchor.
<Add />

label

Label text to place in the anchor.
"Add"
<Box>...</Box>

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"
"small"
"medium"
"large"
"xlarge"
{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

onClick

Click handler. It can be used, for example, to add analytics and track who clicked in the anchor.

() => {}

reverse

Whether an icon and label should be reversed so that the icon is at the end of the anchor.

truefalse

size

The font size is typically driven by the components containing this component. But, it can be adjusted directly via this size property, typically when it is not contained in a 'Heading', 'Paragraph', or 'Text'.

"xsmall""small""medium""large""xlarge""xxlarge""string"

Theme

anchor.color

The color of the label text and icon strokes.
{"dark": "accent-1", "light": "brand"}

anchor.fontWeight

The font weight of the label.
600

anchor.textDecoration

The text decoration of the label. Refer to MDN for possible values.

"none"

anchor.hover.fontWeight

The font weight of the label when hovering.
number

anchor.hover.textDecoration

The text decoration of the label when hovering. Refer to MDN for possible values.

"underline"

anchor.hover.extend

Any additional style for the Anchor when hovering.
"any CSS"
(props) => {}

anchor.extend

Any additional style for the Anchor.
"any CSS"
(props) => {}

text.medium.size

The font size of the text label.
"18px"

text.medium.height

The line height of the text label.
"24px"

global.focus.border.color

The color around the component when in focus.
"focus"

global.edgeSize

The possible sizes for margin.
{
  "none": "0px",
  "hair": "1px",
  "xxsmall": "3px",
  "xsmall": "6px",
  "small": "12px",
  "medium": "24px",
  "large": "48px",
  "xlarge": "96px",
  "responsiveBreakpoint": "small"
}