Buttons allow users to take action and make choices with a single click
import Button, { ButtonGroup } from '../../../ui/button'
Other than the standard solid, a button may have the type outline or transparent. They may also be included as children of the <ButtonGroup />. You will typically give the <Button /> children of a <ButtonGroup /> the outline prop, though it is not required.
- Solid buttons are high emphasis, they have a color fill and shadow.
<Row>
<Button>Button</Button>
<Button icon>
<Icons.Settings width={16} height={16} fill="var(--white)" mr={1} />
Button
</Button>
<Button icon>
<Icons.Settings width={16} height={16} fill="var(--white)" />
</Button>
<Button disabled icon="settings">
<Icons.Settings width={16} height={16} fill="#bebebe" mr={1} />
Button
</Button>
</Row>
- Outline buttons are medium emphasis, they have a 1px stroke.
<Row>
<Button outline>Button</Button>
<Button outline icon>
<Icons.Settings width={16} height={16} fill="#3369a3" mr={1} />
Button
</Button>
<Button outline icon>
<Icons.Settings width={16} height={16} fill="#3369a3" />
</Button>
<Button disabled outline icon>
<Icons.Settings width={16} height={16} fill="#bebebe" mr={1} />
Button
</Button>
</Row>
- Transparent buttons are low emphasis, they are typically used for tertiary actions.
<Row>
<Button transparent>Button</Button>
<Button transparent icon>
<Icons.Settings width={16} height={16} fill="#3369a3" mr={1} />
Button
</Button>
<Button transparent icon>
<Icons.Settings width={16} height={16} fill="#3369a3" />
</Button>
<Button disabled transparent icon>
<Icons.Settings width={16} height={16} fill="#bebebe" mr={1} />
Button
</Button>
</Row>
- Button groups are typically used to group a set of related actions.
<Row>
<ButtonGroup>
<Button outline icon>
<Icons.RatingFilled width={16} height={16} fill="#3369a3" />
</Button>
<Button outline icon>
<Icons.FavoriteFilled width={16} height={16} fill="#3369a3" />
</Button>
<Button outline icon>
<Icons.Message width={16} height={16} fill="#3369a3" />
</Button>
<Button outline icon>
<Icons.Notification width={16} height={16} fill="#3369a3" />
</Button>
<Button outline icon>
<Icons.Settings width={16} height={16} fill="#3369a3" />
</Button>
</ButtonGroup>
<ButtonGroup>
<Button outline>Action 1</Button>
<Button outline>Action 2</Button>
</ButtonGroup>
<ButtonGroup>
<Button outline icon>
<Icons.Settings width={16} height={16} fill="#3369a3" mr={1} />
Action 1
</Button>
<Button outline icon>
<Icons.Settings width={16} height={16} fill="#3369a3" mr={1} />
Action 2
</Button>
</ButtonGroup>
</Row>
Other than the standard size, buttons may be small or large.
- Use small buttons in tables and when space is at a premium.
- Use large buttons when the typography and white space in the layout requires greater button emphasis.
<Row>
<Button small>Button</Button>
<Button small outline>
Button
</Button>
<Button small transparent>
Button
</Button>
</Row>
<Row>
<Button>Button</Button>
<Button outline>Button</Button>
<Button transparent>Button</Button>
</Row>
<Row>
<Button large>Button</Button>
<Button large outline>
Button
</Button>
<Button large transparent>
Button
</Button>
</Row>
Colors aren't well-supported yet. For now you'll need to override the styles as explained below. Make sure to override the colors for the normal, :hover, and :disabled states.
The <Button /> component is a styled-component underneath. This means that any props you pass in will be forwarded to the underlying DOM <button/>. You can override styles either by using the style or className prop, or wrapping it with styled from styled-components.
<Button style={{ padding: 50 }}>Button</Button>
<Button className="p-50">Button</Button>
import styled from 'styled-components'
const MyButton = styled(Button)`
padding: 50px;
`
Because this component outputs a single <button /> element to the DOM, you can treat this component as if it were just a native DOM button when running tests.
