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

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

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

focusRingRadius

The radius applied to the focus ring.

focusRingSpacing

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

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

onClick

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

showFocusRing

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.

Last updated