Top
Button - Styling & Theming
Button
Just like any other component in the toolkit, the <Button /> supports the theme prop, which by default has the value of "default", meaning that the default theme is applied.
In order for the default theme to be applied you have to import @zippytech/react-toolkit/Button/index.css into your app:
import '@zippytech/react-toolkit/Button/index.css'
This file contains both the structural styles that are needed for the button, as well as the default theme.
In case you only want to load the structural styles for the button, you can import @zippytech/react-toolkit/Button/base.css instead:
import '@zippytech/react-toolkit/Button/base.css'
Be aware, though, that in this case you have to style the button appearance for yourself.
However, you can import both the structural styles and the default theme separately:
import '@zippytech/react-toolkit/Button/base.css'
import '@zippytech/react-toolkit/Button/theme/default.css'
You can read more about theming any toolkit component in the theming overview.
Additionally, to style and customize the appearance of <Button />, you can use one of the following strategies:
  • Specify a style prop with the desired values
  • Specify a button className - note that this will not override the default button className of zippy-react-toolkit-button, but rather will be appended to the className the button already has.
In addition, the <Button /> has support for rendering icons and easily positioning them inside the button. For this, you can use the icon and iconPosition props to easily get an icon inside your <Button />.
The <Button /> component can be used for rendering toggle buttons, via the pressed prop (or its uncontrolled version, defaultPressed).
Below you can find a list with all the CSS classes applied to buttons and when/how they are applied.
ClassNameDescription
zippy-react-toolkit-button
This is the block className for all buttons. Always applied.
zippy-react-toolkit-button--ellipsis
Applied when the ellipsis prop for the <Button /> is true - this is also the default value.
zippy-react-toolkit-button--active
Applied when the <Button /> is active (between mousedown and mouseup).
zippy-react-toolkit-button--disabled
Applied when the <Button /> is disabled.
zippy-react-toolkit-button--focused
Applied when the <Button /> is focused.
zippy-react-toolkit-button--over
Applied when the mouse is over the <Button />.
zippy-react-toolkit-button--pressed
Applied when the <Button /> is pressed.
zippy-react-toolkit-button--align-[ALIGNMENT]
Applied with the value of the align prop. The default value for this prop is "center", so zippy-react-toolkit-button--align-center is applied, which makes the <Button /> contents horizontally centered.
zippy-react-toolkit-button--vertical-align-[ALIGNMENT]
Applied with the value of the verticalAlign prop. The default value for this prop is "center", so zippy-react-toolkit-button--vertical-align-middle is applied, which makes the <Button /> contents vertically centered.