ButtonPrimitive

ButtonPrimitive

import ButtonPrimitive from "@kiwicom/orbit-components/lib/primitives/ButtonPrimitive";
<ButtonPrimitive>Hello!</ButtonPrimitive>

Props

NameTypeDefaultDescription
asComponentstring \| React.Element"button"The component used for the root node.
ariaControlsstringId of the element the button controls.
ariaExpandedbooleanTells screen reader the controlled element from ariaControls is expanded.
arialCurrentstringIndicates whether the element represents the current item within within a container or set of related elements.
backgroundstringThe background of the ButtonPrimitive on initial state.
backgroundHoverstringThe background of the ButtonPrimitive on hover state.
backgroundActivestringThe background of the ButtonPrimitive on active state.
backgroundFocusstringThe background of the ButtonPrimitive on focus state.
boxShadowstringThe box-shadow of the ButtonPrimitive on initial state.
boxShadowHoverstringThe box-shadow of the ButtonPrimitive on hover state.
boxShadowActivestringThe box-shadow of the ButtonPrimitive on active state.
boxShadowFocusstringThe box-shadow of the ButtonPrimitive on focus state.
childrenReact.NodeThe content of the ButtonPrimitive. See Functional specs.
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 ButtonPrimitive will have circular shape.
contentAlignstringcenterThe justify-content of inner container that wraps icons and the children.
contentWidthstringThe with of inner container that wraps the children.
dataTeststringOptional prop for testing purposes.
idstringSet id for ButtonPrimitive
downloadboolean \| stringCan only be used when href is defined. Adds the download attribute to the the anchor element.
disabledbooleanfalseIf true, the ButtonPrimitive will be disabled.
externalbooleanfalseIf true, the ButtonPrimitive opens link in a new tab. See Functional specs
fontSizestringThe font-size of the ButtonPrimitive.
fontWeightstringThe font-weight of the ButtonPrimitive.
foregroundstringThe color of the text inside ButtonPrimitive on initial state.
foregroundHoverstringThe color of the text inside ButtonPrimitive on hover state.
foregroundFocusstringThe color of the text inside ButtonPrimitive on active state.
foregroundActivestringThe color of the text inside ButtonPrimitive on focus state.
fullWidthbooleanfalseIf true, the ButtonPrimitive will grow up to the full width of its container.
heightstringThe height of the ButtonPrimitive.
hrefstringThe URL of the link to open when ButtonPrimitive is clicked. See Functional specs
iconLeftReact.NodeThe displayed icon on the left.
iconRightReact.NodeThe displayed icon on the right.
iconsIconsObject property for passing down settings for icons inside the ButtonPrimitive.
loadingbooleanfalseIf true, the loading glyph will be displayed and ButtonPrimitive will be disabled.
onClickevent => void \| PromiseFunction for handling onClick event.
paddingstringThe inner padding of the ButtonPrimitive.
relstringSpecifies the rel of an element. See Functional specs
rolestringSpecifies the role of an element.
spaceAfterenumAdditional margin-bottom after component.
submitbooleanfalseIf true, the ButtonPrimitive will have type="submit" attribute, otherwise type="button".
titlestringAdds aria-label.
tabIndexstring \| number"0"Specifies the tab order of an element.
widthstringThe width of the ButtonPrimitive. Can be any string - 100px, 20%.

enum

spaceAfter
"none"
"smallest"
"small"
"normal"
"medium"
"large"
"largest"

Icons

NameTypeDescription
widthstringThe width of icons inside the ButtonPrimitive.
heightstringThe height of icons inside the ButtonPrimitive.
leftMarginstringThe margin of the left icon inside the ButtonPrimitive.
rightMarginstringThe margin of the left icon inside the ButtonPrimitive.
foregroundstringThe color of the icon inside the ButtonPrimitive.
foregroundHoverstringThe color of the icon inside the ButtonPrimitive.
foregroundFocusstringThe color of the icon inside the ButtonPrimitive.
foregroundActivestringThe color of the icon inside the ButtonPrimitive.

Functional specs

  • When the external is specified, noopener value will be automatically added to attribute rel for security reason.
  • 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 ButtonPrimitive, you just need to let children prop empty and set up any icon you want to use.
  • const YourComponent = props => <div {...props} />
    <ButtonPrimitive asComponent={YourComponent}>Title</ButtonPrimitive>
    const YourComponent = props => <div {...props}>YourComponent</div>;

Accessibility