ButtonLink

ButtonLink

import ButtonLink from "@kiwicom/orbit-components/lib/ButtonLink";
<ButtonLink>Hello World!</ButtonLink>

Props

NameTypeDefaultDescription
ariaControlsstringId of the element the button controls.
ariaExpandedbooleanTells screen reader the controlled element from ariaControls is expanded
asComponentstring \| () => React.Element"button"The component used for the root node.
centeredbooleanfalseCan only be used when fullWidth is true and if iconLeft and/or iconRight are defined. If centered prop is true, the Button will center everything.
circledbooleanfalseIf true, the ButtonLink will have circular shape.
childrenReact.NodeThe content of the ButtonLink. See Functional specs
compactbooleanfalseIf true, the ButtonLink will not have horizontal paddings.
disabledbooleanfalseIf true, the ButtonLink will be disabled.
downloadboolean \| stringCan only be used when href is defined. Adds the download attribute to the anchor element.
dataTeststringOptional prop for testing purposes.
idstringSet id for ButtonLink
externalbooleanfalseIf true, the ButtonLink opens link in a new tab. See Functional specs
fullWidthbooleanfalseIf true, the ButtonLink will grow up to the full width of its container.
hrefstringThe URL of link to open when ButtonLink is clicked. See Functional specs
iconLeftReact.NodeThe displayed icon on the left.
iconRightReact.NodeThe displayed icon on the right.
onClickevent => void \| PromiseFunction for handling onClick event.
reffuncProp for forwarded ref of the Button.
refstringSpecifies the ref of an element. See Functional specs
rolestringSpecifies the role of an element.
sizeenum"normal"The size of the ButtonLink.
spaceAfterenumAdditional margin-bottom after component. See this docs
submitbooleanfalseIf true, the Button will have type="submit" attribute, otherwise type="button".
tabIndexstring \| numberSpecifies the tab order of an element.
titlestringAdds aria-label.
typeenum"primary"The type of ButtonLink.
widthstringThe width of the ButtonLink. Can be any string - 100px, 20%.

enum

typesize
"primary""small"
"secondary""normal"
"critical""large"

Functional specs

const YourComponent = props => <div {...props} />
<ButtonLink asComponent={YourComponent}>Title</ButtonLink>
const YourComponent = props => <div {...props}>YourComponent</div>
<ButtonLink asComponent={YourComponent}>Title</ButtonLink>

Accessibility