Whether this is a primary button. There should be at most one per page or screen.
Button
A grommet Button is used for anything that looks like a button on the screen. If an href
is provided, it will be rendered in the DOM with <a/>
. An Anchor component should be used for inline anchors within textual contexts.
In May 2020, we enhanced Button to have three kinds, outlined below. In order to maintain backwards compatibility, this approach is only available when the theme being used defines button.default
.
default
The majority of Buttons on the page. Their affordance is primarily driven by their context, in a Nav in a Header or Sidebar, the corner of a tile or card, etc.
primary
The primary call to action. There should typically be at most one primary Button on the screen. In a Form context, it signifies the action bound to the enter key that will submit the form.
secondary
When there isn’t enough context to indicate its affordance, or when it should call extra attention to itself but isn’t the primary call to action, use a secondary Button. Secondary buttons are only available when the underlying theme being used defines button.default
.
Custom label to be used by screen readers. When provided, an aria-label will be added to the element.
"a user friendly label for screen readers"
How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
"start"
"center"
"end"
"stretch"
Function that can be called to render the visual representation.
Button can take in Children as a function, node, or object.
For example, 'disabled', 'hover', and 'focus' can be passed as an
argument that would then return a react element.
children={({ disabled, hover, focus }) => <Box...>{...}</Box>}
.
When Button has children, it is styled as a plain
button.
Whether the button expands to fill all of the available width and/or height.
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.
The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.
"xsmall"
"small"
"medium"
"large"
"xlarge"
{
"vertical": "...",
"horizontal": "...",
"top": "...",
"bottom": "...",
"left": "...",
"right": "..."
}
Click handler. Not setting this property and not specifying a href causes the Button to be disabled.
() => {}
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. When using the kind button (i.e. button.default on the theme), the usage of plain is deprecated.
Whether an icon and label should be reversed so that the icon is at the end of the anchor.
The possible sizes of Button, that impacts the overall Button padding, border radius, text size and line height. 'size' will not impact any icon related sizing.
{
"background": "background-contrast",
"elevation": "small",
"margin": "xsmall",
"pad": {
"vertical": "xsmall",
"horizontal": "small"
},
"round": "small"
}