Skip to contentSkip to navigationSkip to topbar
Figma
Star

Anchor

Version 12.1.0GithubStorybook

An Anchor is text that navigates the user from one webpage to another.

Installation

Installation page anchor
yarn add @twilio-paste/anchor - or - yarn add @twilio-paste/core
import {Anchor} from '@twilio-paste/core/anchor';

const Component = () => <Anchor href="https://paste.twilio.design">Go to Paste</Anchor>;

Anchor

Anchor page anchor

href RequiredRequired

A URL to route to.

Type
string
Default
null

columnGap

Responsive prop of Space tokens for the CSS column-gap property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

display

Responsive style prop for the CSS display property

Type
| Display | (Display | null | undefined)[] | { [x: string]: Display | undefined; [x: number]: Display | undefined }

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'ANCHOR'

height

Responsive style prop of Size Tokens for for the CSS height property

Type
| string | number | (string & {}) | (HeightOptions | null)[] | { [x: string]: HeightOptions; [x: number]: HeightOptions }

i18nExternalLinkLabel

Title for showExternal icon

Type
string
Default
'(link takes you to an external page)'

margin

Responsive prop of Space tokens for the CSS margin property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginBottom

Responsive prop of Space tokens for the CSS margin-bottom property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginLeft

Responsive prop of Space tokens for the CSS margin-left property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginRight

Responsive prop of Space tokens for the CSS margin-right property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginTop

Responsive prop of Space tokens for the CSS margin-top property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginX

Responsive prop of Space tokens for the CSS margin-left and margin-right properties

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginY

Responsive prop of Space tokens for the CSS margin-top and margin-bottom properties

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

maxHeight

Responsive style prop of Size Tokens for for the CSS max-height property

Type
| string | number | (string & {}) | (MaxHeightOptions | null)[] | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }

maxWidth

Responsive style prop of Size Tokens for for the CSS max-width property

Type
| string | number | (string & {}) | (MaxWidthOptions | null)[] | { [x: string]: MaxWidthOptions; [x: number]: MaxWidthOptions }

minHeight

Responsive style prop of Size Tokens for for the CSS min-height property

Type
| string | number | (string & {}) | (MinHeightOptions | null)[] | { [x: string]: MinHeightOptions; [x: number]: MinHeightOptions }

minWidth

Responsive style prop of Size Tokens for for the CSS min-width property

Type
| string | number | (string & {}) | (MinWidthOptions | null)[] | { [x: string]: MinWidthOptions; [x: number]: MinWidthOptions }

overflow

Type
| Overflow | (Overflow | null | undefined)[] | { [x: string]: Overflow | undefined; [x: number]: Overflow | undefined }

overflowX

Type
| OverflowX | (OverflowX | null | undefined)[] | { [x: string]: OverflowX | undefined; [x: number]: OverflowX | undefined }

overflowY

Type
| OverflowY | (OverflowY | null | undefined)[] | { [x: string]: OverflowY | undefined; [x: number]: OverflowY | undefined }

padding

Responsive prop of Space tokens for the CSS padding property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingBottom

Responsive prop of Space tokens for the CSS padding-bottom property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingLeft

Responsive prop of Space tokens for the CSS padding-left property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingRight

Responsive prop of Space tokens for the CSS padding-right property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingTop

Responsive prop of Space tokens for the CSS padding-top property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingX

Responsive prop of Space tokens for the CSS padding-left and padding-right properties

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingY

Responsive prop of Space tokens for the CSS padding-top and padding-bottom properties

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

rel

Sets the anchor rel attribute. If external href, defaults to 'noreferrer noopener'. Can be overwritten.

Type
string
Default
null

rowGap

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

showExternal

Shows the link external icon.

Type
boolean

size

Responsive style prop of Size Tokens for for the CSS width and height properties

Type
string | number | (string & {}) | (WidthOptions | null)[] | { [x: string]: WidthOptions; [x: number]: WidthOptions; } | (HeightOptions | null)[] | { ...; }

tabIndex

Sets the anchor tabIndex attribute.

Type
AnchorTabIndexes
Default
null

target

If external href, defaults to '_blank'. Can be overwritten.

Type
AnchorTargets
Default
null

variant

Sets the styled Anchor variant

Type
AnchorVariants
Default
'default'

verticalAlign

Responsive style prop for the CSS vertical-align property

Type
VerticalAlign<0 | (string & {})> | (VerticalAlign<0 | (string & {})> | null | undefined)[] | { [x: string]: VerticalAlign<0 | (string & {})> | undefined; [x: number]: VerticalAlign<...> | undefined; }

width

Responsive style prop of Size Tokens for the CSS width property

Type
| string | number | (string & {}) | (WidthOptions | null)[] | { [x: string]: WidthOptions; [x: number]: WidthOptions }