To implement Button component into your project you'll need to add the import:
import Button from "@kiwicom/orbit-components/lib/Button";
After adding import into your project you can use it simply like:
<Button>Hello World!</Button>
Table below contains all types of the props available in Button component.
Name | Type | Default | Description |
---|---|---|---|
ariaControls | string |
Id of the element the button controls. | |
ariaExpanded | boolean |
Tells screen reader the controlled element from ariaControls is expanded |
|
asComponent | string | React.Element |
"button" |
The component used for the root node. |
fullWidth | boolean |
false |
If true , the Button will grow up to the full width of its container. |
bordered | boolean |
false |
If true , the Button will have a lighter version, with border and light background. |
circled | boolean |
false |
If true , the Button will have circular shape. |
children | React.Node |
The content of the Button. See Functional specs | |
dataTest | string |
Optional prop for testing purposes. | |
disabled | boolean |
false |
If true , the Button will be disabled. |
external | boolean |
false |
If true , the Button opens link in a new tab. See Functional specs |
href | string |
The URL of the link to open when Button is clicked. See Functional specs | |
iconLeft | React.Node |
The displayed icon on the left. | |
iconRight | React.Node |
The displayed icon on the right. | |
loading | boolean |
false |
If true , the loading glyph will be displayed. |
onClick | event => void | Promise |
Function for handling onClick event. | |
ref | func |
Prop for forwarded ref of the Button. | |
role | string |
Specifies the role of an element. | |
size | enum |
"normal" |
The size of the Button. |
spaceAfter | enum |
Additional margin-bottom after component. See this docs |
|
submit | boolean |
false |
If true , the Button will have type="submit" attribute, otherwise type="button" . |
tabIndex | string |
Specifies the tab order of an element. | |
title | string |
Adds aria-label . |
|
type | enum |
"primary" |
The type of Button. |
width | string |
The width of the Button. Can be any string - 100px , 20% . |
type | size |
---|---|
"primary" |
"small" |
"secondary" |
"normal" |
"info" |
"large" |
"success" |
|
"warning" |
|
"critical" |
|
"facebook" |
|
"google" |
|
"white" |
- When the
external
is specified,noopener
andnoreferrer
values will automatically added to attributerel
for security reason.
- By passing the
href
prop into Button, it will render intoa
element. If you passasComponent
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 anyicon
you want to use.
-
If you want to use the
asComponent
prop then YourComponent should accept at leastclassName
. Otherwise it won't be rendered with proper styling, e.g.:const YourComponent = props => <div {...props} /> <Button asComponent={YourComponent}>Title</Button>
If you specify the children of YourComponent component, it will override the children prop of Button 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 Button for navigation consider using a <TextLink>
for that.
-
Use
ariaControls
prop to addaria-controls
attribute to establish the relationship between button and element which is controlled by it.aria-controls
works only with a uniqueid
of an element. -
Use
ariaExpands
prop to addaria-expands
to indicate screenreaders, that element controlled by button throughariaControls
is expanded or not. -
Use
disabled
prop to indicate users that button is inactive and they can't interact with it. -
Use
role
andtabIndex
when you are renderingButton
to non-actionable HTML element asdiv
orspan
. However, this should be done only in edge-cases as it is anti-pattern behavior. -
Use
title
to addaria-label
when you need to add extra informations to screen readers or there is nochildren
presented to be used as label.