Anchor

a text link

Storybook

CodeSandbox

Github

Using Grommet for HPE?See Anchor examples and guidance.

Props

a11yTitle

Custom title to be used by screen readers.

string

"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.

string

"start"

"center"

"end"

"stretch"

"baseline"

as

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

string

The name of a component.

"div"

function

() => {}

component

{Component}

color

Label color and icon color, if not specified on the icon.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

disabled

Whether the anchor is disabled.

boolean

true

false

gap

The amount of spacing between icon and label in the anchor.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"xxsmall"

"string"

gridArea

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

string

"a parent grid area name"

href

Hyperlink reference to place in the anchor.

string

"//my.com/path"

icon

Icon element to place in the anchor.

element

<Add />

label

Label text to place in the anchor.

string

"Add"

element

A component used to display the label.

<Box>...</Box>

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    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.

function

( ) => { }

reverse

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

boolean

true

false

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'.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"xsmall"

"small"

"medium"

"large"

"xlarge"

"xxlarge"

"12px"

weight

Sets font-weight property for anchor.

string

Any browser font-weight definition.

"normal"

"bold"

number

React/DOM Properties

At its core, the Anchor component is a regular <a> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for a elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

anchor.color

The color of the label text and icon strokes.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light mode.

{"dark": "black", "light": "brand"}

anchor.fontWeight

The font weight of the label.

number

anchor.gap

The gap between the label and icon.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"none"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"20 px"

anchor.icon.color

The color of the icon.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

anchor.textDecoration

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

string

"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.

string

"underline"

anchor.hover.extend

Any additional style for the Anchor when hovering.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

anchor.icon.color

The color of the icon.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light mode.

{"dark": "black", "light": "brand"}

anchor.extend

Any additional style for the Anchor.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

anchor.size.[size].color

The color of the label text and icon strokes on different Anchor sizes. Size refers to the text size of the Anchor.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light mode.

{"dark": "black", "light": "brand"}

anchor.size.[size].gap

The gap between the label text and the icon on different Anchor sizes. Size refers to the text size of the Anchor.

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

"none"

"xsmall"

"small"

"medium"

"large"

"xlarge"

"20 px"

anchor.size.[size].fontWeight

The font weight of the label on different Anchor sizes. Size refers to the text size of Anchor.

number

anchor.size.[size].textDecoration

The text decoration of the label when hovering on different Anchor sizes. Size refers to the text size of Anchor.

string

"underline"

text.medium.size

The font size of the text label.

string

"18px"

text.medium.height

The line height of the text label.

string

"24px"

global.focus.border.color

The border color of the component when in focus.

string

A hex, name, or rgb value.

"focus"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.focus.inset

Focus styles for cases where focus indicator should be inset in the container.

object

An object can contain a border, outline, shadow, and twoColor. The twoColor option enables a dual-color focus effect, usually rendered as layered outlines or shadows for enhanced contrast.

{    
        inset: {
          border: {
            color: 'focus',
          },
          outline: { color: 'focus', size: '2px', offset: '-2px' },
          shadow: undefined,
          twoColor: undefined,
        },}

global.focus.outline.color

The outline color around the component when in focus.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.focus.outline.size

The size of the outline around the component when in focus.

string

"2px"

global.focus.shadow.color

The shadow color around the component when in focus.

string

"focus"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.focus.shadow.size

The size of the shadow around the component when in focus.

string

"2px"

global.edgeSize

The possible sizes for margin.

object


    {
      none: '0px',
      hair: '1px',
      xxsmall: '3px',
      xsmall: '6px',
      small: '12px',
      medium: '24px',
      large: '48px',
      xlarge: '96px',
      responsiveBreakpoint: 'small'
    }