## Anchor
A text link.

We have a separate component from the browser
base so we can style it. You can either set the icon and/or label properties
or just use children.

[![](https://cdn-images-1.medium.com/fit/c/120/120/1*TD1P0HtIH9zF0UEH28zYtw.png)](https://storybook.grommet.io/?selectedKind=Controls-Anchor&full=0&stories=1&panelRight=0) [![](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/anchor&module=%2Fsrc%2FAnchor.js)
## Usage

```javascript
import { Anchor } from 'grommet';
<Anchor href={location} label='Label' />
```

## Properties

**a11yTitle**

Custom title to be used by screen readers.

```
string
```

**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
```

**gridArea**

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

```
string
```

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

```
none
xxsmall
xsmall
small
medium
large
xlarge
{
  bottom: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  end: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  horizontal: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  left: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  right: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  start: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  top: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  vertical: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string
}
string
```

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

```
string
{
  dark: string,
  light: string
}
```

**disabled**

Whether the anchor is disabled.

```
boolean
```

**href**

Hyperlink reference to place in the anchor.

```
string
```

**icon**

Icon element to place in the anchor.

```
element
```

**label**

Label text to place in the anchor.

```
node
```

**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
```

**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
```

**weight**

Sets font-weight property for anchor.

```
normal
bold
number
```
  
## Intrinsic element

```
a
```
## Theme
  
**anchor.color**

The color of the label text and icon strokes. Expects `string | { dark: string, light: string }`.

Defaults to

```
{ light: '#1D67E3', dark: '#6194EB' }
```

**anchor.fontWeight**

The font weight of the label. Expects `number`.

Defaults to

```
600
```

**anchor.textDecoration**

The text decoration of the label.
Refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)
for possible values. Expects `string`.

Defaults to

```
none
```

**anchor.hover.fontWeight**

The font weight of the label when hovering. Expects `number`.

Defaults to

```
undefined
```

**anchor.hover.textDecoration**

The text decoration of the label when hovering.
Refer to [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)
for possible values. Expects `string`.

Defaults to

```
underline
```

**anchor.hover.extend**

Any additional style for the Anchor when hovering. Expects `string | (props) => {}`.

Defaults to

```
undefined
```

**anchor.extend**

Any additional style for the Anchor. Expects `string | (props) => {}`.

Defaults to

```
undefined
```

**text.medium.size**

The font size of the text label. Expects `string`.

Defaults to

```
18px
```

**text.medium.height**

The line height of the text label. Expects `string`.

Defaults to

```
24px
```

**global.focus.border.color**

The border color of the component when in focus. Expects `string | { dark: string, light: string }`.

Defaults to

```
focus
```

**global.focus.outline.color**

The outline color around the component when in focus. Expects `string | { dark: string, light: string }`.

Defaults to

```
undefined
```

**global.focus.outline.size**

The size of the outline around the component when in focus. Expects `string`.

Defaults to

```
undefined
```

**global.focus.shadow.color**

The shadow color around the component when in focus. Expects `string | { dark: string, light: string }`.

Defaults to

```
focus
```

**global.focus.shadow.size**

The size of the shadow around the component when in focus. Expects `string`.

Defaults to

```
2px
```

**global.edgeSize**

The possible sizes for margin. Expects `object`.

Defaults to

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