To implement ButtonPrimitive component into your project you’ll need to add the import:

import ButtonPrimitive from "@kiwicom/orbit-components/lib/primitives/ButtonPrimitive";

After adding import into your project you can use it simply like:

<ButtonPrimitive>Hello!</ButtonPrimitive>

Table below contains all types of the props available in ButtonPrimitive component.

icons is special object property of ButtonPrimitive where you can pass settings that belongs to icons that is possible to use inside this component.

• 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.

• If you want to use the asComponent prop then YourComponent should accept at least className. Otherwise it won’t be rendered with proper styling, e.g.:

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

  If you specify the children of YourComponent component, it will override the children prop of ButtonPrimitive component, e.g.:

  const YourComponent = props => <div {...props}>YourComponent</div>;

A button is mainly used for indicating an action, submitting a data, opening a modal etc. If you want to use ButtonPrimitive for navigation consider using a <TextLink> for that.

• Use ariaControls prop to add aria-controls attribute to establish the relationship between button and element which is controlled by it. aria-controls works only with a unique id of an element.

• Use ariaExpands prop to add aria-expands to indicate screenreaders, that element controlled by button through ariaControls is expanded or not.

• Use disabled prop to indicate users that button is inactive and they can’t interact with it.

• Use role and tabIndex when you are rendering Button to non-actionable HTML element as div or span. However, this should be done only in edge-cases as it is anti-pattern behavior.

• Use title to add aria-label when you need to add extra information to screen readers or there is no children presented to be used as label.