ButtonBase

A foundational component used to build other button-like components. When href is set, an <a /> element will be used (safe by default). If not, a <button /> element will be used instead. It also features a focused state. You might want to use Link or Button instead.

Usage

import { LinkBase } from '@aragon/ui'

function App() {
  return (
    <LinkBase href="https://example.com/" external>
      Example
    </LinkBase>
  )
}

Props

disabled

TYPE	DEFAULT VALUE
Boolean	false

When set to true, the disabled prop will be passed to the button element, and onClick will get ignored. If an href is present and disabled is true, the href won’t get passed to the <a> element underneath.

external

TYPE	DEFAULT VALUE
Boolean	false

Ignored if href is not set. Set to true to add a target="_blank" attribute and make it safe by default.

focusRingRadius

TYPE	DEFAULT VALUE
Number	0

The radius applied to the focus ring.

focusRingSpacing

TYPE	DEFAULT VALUE
Number or Array	0

The space between the element and the focus ring. When an array is used, the first and second values will be used for the horizontal and vertical spacings, respectively.

href

TYPE	DEFAULT VALUE
String	None

When set, the component will act like a normal HTML anchor.

onClick

TYPE	DEFAULT VALUE
Function	None

Gets called when the user activates the link. Like other buttons, it gets called when the enter key is pressed on the keyboard.

showFocusRing

TYPE	DEFAULT VALUE
Boolean	true

Whether or not to display the focus ring when focused.

Other props

Any other prop will be passed to the <a> element ) if href is present, or the <button> element otherwise.