Button
this is a button
You can provide a single function child that will be called with 'hover' and 'focus' keys. This allows you to customize the rendering of the Button in those cases.
Example
Active:
Example
Color:
Example
Icon:
<Button icon={<Close />} onClick={() => {}} />
Label:
Example
Primary:
Example
Reverse:
<Button reverse icon={<Edit />} label="Edit" onClick={() => {}} />
Props:
Prop Name | Values | Required | Default Value | Description |
active | optional | false | Whether the button is active. | |
color | optional | 'brand' | Fill color for primary, label color for plain, border color otherwise. | |
disabled | optional | false | Whether the button is disabled. | |
fill | 'horizontal''vertical'bool | optional | false | Whether the button expands to fill all of the available width and/or height. |
focusIndicator | optional | true | Whether when 'plain' it should receive a focus outline. | |
hoverIndicator | optional | false | The hover indicator to apply when the user is mousing over the button. An object can be also be specified for color index support: {background: 'neutral-2'}. This prop is meant to be used only with plain Buttons. | |
href | optional | '#' | If specified, the button will behave like an anchor tag. | |
target | '_self''_blank''_parent''_top' | optional | 'self' | Specifies where to display the URL defined in the href property. |
icon | optional | [] | Icon element to place in the button. | |
gap | 'none''xxsmall''xsmall''small''medium''large''xlarge'string | optional | 'small' | The amount of spacing between icon and label in the button. |
label | optional | 'Text' | Label text to place in the button. | |
onClick | optional | () => {} | Click handler. Not setting this property and not specifying a href causes the Button to be disabled. | |
plain | optional | false | Whether this is a plain button with no border or pad. Non plain button will show both pad and border. The plain button has no border and unless the icon prop exist it has no pad as well | |
primary | optional | false | Whether this is a primary button. There should be at most one per page or screen. | |
reverse | optional | false | Whether an icon and label should be reversed so that the icon is at the end of the anchor. | |
type | 'button''reset''submit' | optional | 'button' | The type of button. Set the type to submit for the default button on forms. |
as | stringfunc | optional | 'button' | The DOM tag or react component to use for the element. |