1.0.0Utility Button
UtilityButton acts as inline page navigation and should always be used in groups of two or more, compared to the Button component which is designed to work as a standalone element and performs the role of a call-to-action (CTA).
Installation
bash
npm install @nib/utility-button
Usage
jsx
import UtilityButton from '@nib/utility-button';
Interactive demo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title (required) | string | The main text string of the button. | |
subtitle | string | The subtitle text string of the button. | |
icon | component | An icon to be displayed on the left of the button. Must be an icon from the @nib/icons package. | |
showBorder | boolean | false | Option to display a border. |
showChevron | boolean | true | Option to display the chevron. |
href | string | Add a link to the button. Note that the component is rendered as an <a> tag in the DOM. | |
onClick | function | If the component is required to carried out some complex functionality other than linking | |
component | string or component | What to render the utility button as. Should be either a button or a. If onClick is not supplied, will defaults to a |
Usage
Alert: (info) If you require a single button, then use the Button component.
Props used on one UtilityButton should be carried through to all other UtilityButton’s within the group. So for example, if an icon is included in one UtilityButton, then all UtilityButton’s should include an icon. All UtilityButton’s used in a group should be uniform.
A UtilityButton can be used on either a white or #eee (Sneezy) background. When the UtilityButton is placed on a white background, then border should be shown.