The block boolean sets 100% width on the button. It will fill the width of the parent container.
To support text truncation and ellipsis, the following must be true:
A button must be block
There are a few ways to add icons to buttons. You can add an Icon component as a child, or you can configure the icon prop.
Using the icon prop will always place the icon on the left side of the button. If you wish to place the icon on the right it is suggested to use an Icon child.
Prior to Version 10 we supported passing a string to the icon prop, which would internally render an Icon component. We have moved away from this approach and now require you to pass in a ReactNode, preferably a component from the @procore/core-icons package.
If you want to display a button that only has an icon in it, you can use the icon prop with no children. This will set the button to a fixed size and horizontally and vertically center a clickable Icon component.
To meet accessibility criteria, icon only buttons should use an aria-label.
Prior to Version 10 we supported passing in <Icon /> components as children on either the left or right side of the label. This is no longer supported. Please use the icon and iconRight props instead.
Loading buttons are useful when used with asynchronous operations like form submissions or loading data into a dropdown.
The LinkButton component can be used to get an <a> tag looking exactly the same as a Button and operating like a link:
It takes the same props as the Button component (except loading) as well as all regular anchor attributes and renders an <a> tag. If the href attribute is omitted then the <a> tag is only a placeholder for a hyperlink and has the look of a disabled button.
Depending on the browser, disabled HTML buttons might not fire an event. Wrapping the button node in a span will allow the tooltip to be attached to this node rather than the button.
FlexList wraps the Button in a div with the width of the flex child. The button then fills the width of this container, rather than receive the flex child properties. The current work around is below.
Set FlexList boxProps={{ flex: 1 }}.
Or use Flex with a Box around each Button.
Sets the button to be 100% of the width of its parent
10.19.0