Button - Getting started
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <Button /> component, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/Button and @zippytech/react-toolkit/Button/index.css.
This is the most basic setup for a <Button />. In the following sections we'll explore how to use and style the <Button /> component, explain theming and all supported props.
When you use a <Button />, the most basic things you want it to do is to respond to user events and to render custom content easily. This can be accomplished by specifying the onClick prop and whatever children you want to render inside the button.
The snippet above renders a <button /> html tag, with the zippy-react-toolkit-button className. All components in the toolkit use the BEM CSS convention, and their CSS classes are prefixed with zippy-react-toolkit-. You can read more about BEM theming.
To be notified of a click event on the <Button />, specify onClick prop, which is called with the corresponding event object. Since the rendered output is just a <button /> html tag, the <Button /> component is focusable in the normal tab navigation order, and its onClick handler is also executed when the user presses the Enter key while the <Button /> is focused.
You can, however, specify a tagName prop to render any html tag or React Component.
The <Button /> supports both horizontal align and verticalAlign - so, you can easily layout content aligned to fit your usecase. The example below illustrates the alignment possibilities.
Also, for wrapping and adding ellipsis to overflowing content, continue reading the next section.
You can style buttons as you style any other React component, using either the className prop or the style prop for inline styling. Additionally, you can target zippy-react-toolkit-button in your CSS code to do additional styling.
<Button style={{ border: '1px solid red' }} className="my-custom-button" />
For buttons containing overflowing text, by default, ellipsis is shown.
Note however, that for ellipsis to work as expected, the <Button /> children need to be text/string. When rendering something else, you might hit into situations when you need to implement text-ellipsis styles yourself.
By default, the <Button /> will adjust in size to fit its contents/children. If you want a fixed size, use the style to give the <Button /> the desired width or height.
If you choose not to show the ellipsis for content that doesn't fit, the <Button /> will wrap its content by default, since browsers apply white-space: normal.
However, by using the wrap boolean property, you can control the wrapping behaviour.
If ellipsis is true, it will enforcewrap=false, since in order to have ellipsis, the text doesn't need to wrap.