Search…
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.
Copy link
On this page
Usage
Props