Button

Button

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

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.
fullWidthbooleanfalseIf true, the Button will grow up to the full width of its container.
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 Button will have circular shape.
childrenReact.NodeThe content of the Button. See Functional specs
dataTeststringOptional prop for testing purposes.
idstringSet id for Button
disabledbooleanfalseIf true, the Button will be disabled.
downloadboolean \| stringCan only be used when href is defined. Adds the download attribute to the the anchor element.
externalbooleanfalseIf true, the Button opens link in a new tab. See Functional specs
hrefstringThe URL of the link to open when Button is clicked. See Functional specs
iconLeftReact.NodeThe displayed icon on the left.
iconRightReact.NodeThe displayed icon on the right.
loadingbooleanfalseIf true, the loading glyph will be displayed.
onClickevent => void \| PromiseFunction for handling onClick event.
reffuncProp for forwarded ref of the Button.
relstringSpecifies the rel of an element. See Functional specs
rolestringSpecifies the role of an element.
sizeenum"normal"The size of the Button.
spaceAfterenumAdditional margin-bottom after component.
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 Button.
widthstringThe width of the Button. Can be any string - 100px, 20%.

enum

typesizespaceAfter
"primary""small""none"
"secondary""normal""smallest"
"critical""large""small"
"white""normal"
"primarySubtle""medium"
"criticalSubtle""large"
"bundleBasic""largest"
"bundleMedium"
"bundleTop"

Functional specs

  • When the external is specified, noopener value will be automatically added to attribute rel for security reason. Read more about it here.
  • By passing the href prop into Button, it will render into a element. If you pass asComponent prop it will override this logic.
  • If you want to render Icon only Button, you just need to let children prop empty and set up any icon you want to use.
  • const YourComponent = props => <div {...props} />
    <Button asComponent={YourComponent}>Title</Button>
    const YourComponent = props => <div {...props}>YourComponent</div>;
  • By default, a full width Button renders with the children centered. However, if iconLeft and/or iconRight are defined, the content will align to the left by default. In such scenario, the centered prop can be used to center everything.

Accessibility