Components
Clickable elements used to perform actions.
Version: | 14.18.2 •View source•Changelog•Report issue | |
---|---|---|
Install: | yarn add @thumbtack/thumbprint-react | |
Import: | import { Button, TextButton } from '@thumbtack/thumbprint-react'; |
These are the available Button
styles for use on light background colors.
The solid
theme works well on dark backgrounds.
Buttons are large
by default. The size
prop allows you to render a small
button.
The isDisabled
prop visually and functionally disables the button.
This button becomes full width on viewports that are smaller than our small
breakpoint. The width is auto
on larger screens.
The icon
prop accepts any small icon from Thumbprint Icons.
This prop renders an icon left within button.
iconRight
renders an icon right within button.
These loading indicators should be used when buttons are processing. They are avialble in the primary
, secondary
, and tertiary
button themes.
The TextButton
component renders button elements that visually appear as text links. These buttons accept an onClick
and render as inline elements.
The TextButton
component provides a iconLeft
prop to help vertically position icons alongside text.
The TextButton
component also allows an icon to the right of the text.
This icon inherits the color of its parent with theme="inherit"
.
These buttons inherit the font size and font weight of their container.
The Pro exceeded our expectations and did a fantastic…
children
Contents displayed within the button.
React.ReactNode
isDisabled
Visually and functionally disables the button.
boolean
false
isLoading
Boolean determining whether the button is in a loading state. When true
the text will
we replaced with a loading animation and interaction will be disabled.
boolean
false
icon
Icon from Thumbprint Icons to render left within the button. It must be one of the
small
icons.
React.ReactNode
iconRight
Icon from Thumbprint Icons to render right within the button. It must be one of the
small
icons.
React.ReactNode
accessibilityLabel
Description of the button’s content. It is required if the button has an icon and no descriptive text.
string
type
Button’s of type submit
will submit a form when used within a form
element.
This prop can be one of the following 2 types:
'button'
'submit'
'button'
onClick
Function that will run when the button is clicked on.
(e: React.MouseEvent<HTMLElement>) => void
onMouseEnter
Function that runs when the user hovers on the button.
(e: React.MouseEvent<HTMLElement>) => void
onMouseOver
Function that runs when the user hovers on the button. Unlike onMouseEnter
, onMouseOver
fires each time a child element receives focus.
(e: React.MouseEvent<HTMLElement>) => void
onFocus
Function that runs when the button receives focus.
(e: React.FocusEvent<HTMLElement>) => void
onMouseLeave
Function that runs when the user hovers away from the button.
(e: React.MouseEvent<HTMLElement>) => void
onBlur
Function that runs when the button loses focus.
(e: React.FocusEvent<HTMLElement>) => void
theme
Controls the button’s background, text, and border color.
This prop can be one of the following 5 types:
'primary'
'secondary'
'tertiary'
'caution'
'solid'
'primary'
size
Changes the button’s line-height
, padding
, border-radius
, and font-size
.
This prop can be one of the following 2 types:
'small'
'large'
'large'
width
Button
components are as wide as the content that is passed in. The full
option will
expand the width to 100%
on all screens. full-below-small
will expand the width to 100%
on devices smaller than our small
breakpoint.
This prop can be one of the following 3 types:
'auto'
'full'
'full-below-small'
'auto'
dataTestId
A selector hook into the React component for use in automated testing environments.
string
dataTest
A selector hook into the React component for use in automated testing environments.
Note: Deprecated in favor of the `dataTestId` prop
string
children
Contents displayed within the button.
React.ReactNode
iconLeft
Icon from Thumbprint Icons to render left of the text within TextButton
.
React.ReactNode
iconRight
Icon from Thumbprint Icons to render right of the text within TextButton
.
React.ReactNode
isDisabled
Visually and functionally disables the button. We discourage the use of this prop since it
is difficult to visually indicate that a link is disabled. Consider not rendering the
TextButton
if it is not interactive.
boolean
false
onClick
Function that will run when the button is clicked on.
(e: React.MouseEvent<HTMLElement>) => void
onMouseEnter
Function that runs when the user hovers on the button.
(e: React.MouseEvent<HTMLElement>) => void
onMouseOver
Function that runs when the user hovers on the button. Unlike onMouseEnter
, onMouseOver
fires each time a child element receives focus.
(e: React.MouseEvent<HTMLElement>) => void
onFocus
Function that runs when the button receives focus.
(e: React.FocusEvent<HTMLElement>) => void
onMouseLeave
Function that runs when the user hovers away from the button.
(e: React.MouseEvent<HTMLElement>) => void
onBlur
Function that runs when the button loses focus.
(e: React.FocusEvent<HTMLElement>) => void
accessibilityLabel
Description of the button’s content. It is required if the button has an icon and no descriptive text.
string
theme
Controls the button’s background, text, and border color.
inherit
will make the button inherit color
from its parent.
This prop can be one of the following 4 types:
'primary'
'secondary'
'tertiary'
'inherit'
'primary'
type
Button’s of type submit
will submit a form when used within a form
element.
This prop can be one of the following 2 types:
'button'
'submit'
'button'
dataTestId
A selector hook into the React component for use in automated testing environments.
string
dataTest
A selector hook into the React component for use in automated testing environments.
Note: Deprecated in favor of the `dataTestId` prop
string