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.import { LinkBase } from '@aragon/ui'
function App() {
return (
<LinkBase href="https://example.com/" external>
Example
</LinkBase>
)
}
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.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.TYPE | DEFAULT VALUE |
---|---|
Number | 0 |
The radius applied to the focus ring.
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.
TYPE | DEFAULT VALUE |
---|---|
String | None |
When set, the component will act like a normal HTML anchor.
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.
TYPE | DEFAULT VALUE |
---|---|
Boolean | true |
Whether or not to display the focus ring when focused.
Any other prop will be passed to the
<a>
element ) if href
is present, or the <button>
element otherwise.Last modified 6mo ago