Utility 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
npm install @nib/utility-button
Usage
import UtilityButton from '@nib/utility-button';
Interactive demo
UtilityButton is a compound component with two sub-components: UtilityButton.Title and UtilityButton.SubTitle.
Props
UtilityButton
| Prop | Type | Default | Description |
|---|---|---|---|
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 node | What to render the utility button as. Should be either a button or a. If onClick is not supplied, will defaults to a | |
children (required) | node | Should include a UtilityButton.Title and optionally a UtilityButton.SubTitle |
UtilityButton.Title & UtilityButton.SubTitle
| Prop | Type | Default | Description |
|---|---|---|---|
truncate | boolean | false | Option to truncate the title and subtitle. Given this component is a CTA truncating the label is not recommended. |
children (required) | string | The text for the utility button. |
Usage
Components must be wrapped by this Theme
Props used on one UtilityButton should be carried through to all other UtilityButtons within the group. So for example, if an icon is included in one UtilityButton, then all UtilityButtons should include an icon. All UtilityButtons used in a group should be uniform.
Be conscious of the number of UtilityButton components you have in a group and the impact that has on available space for the title/subtitle. Within our Container component we've found that 4 - 5 is the most that can comfortably fit. If using icons, this drops down to 3 - 4. If including close to the maximum number of utility buttons be sure to set collapseBelow on the Columns component to xl or xxl.
A UtilityButton should be used on either a White or Lightest background. When the UtilityButton is placed on a White background, then border should be shown.
Multiple utility buttons
Multiple utility buttons with icons
Note: The
ColumnsandColumnwith theflexprop is how we achieve equal heights for the utility buttons when the content lengths differ.