Button

Buttons make common actions immediately detectable and easy to perform.

import * as React from "react";
import { Button } from "@nulogy/components";

export default () => {
  return <Button>Hello</Button>;
}

import * as React from "react";
import { Button } from "@nulogy/components";

export default () => {
  return <Button>Hello</Button>;
}

Types of buttons

There are three other types of buttons for different contexts, which all share the same properties as Button. They can be imported as their own components, e.g:

import * as React from "react";
import { QuietButton } from "@nulogy/components";
export default () => {
  return <PrimaryButton>Create project</PrimaryButton>;
};

PrimaryButton

PrimaryButtons are used for the main action in a particular context. There is usually not more than one primary button per screen and not all of the screens require a Primary button.

DangerButton

DangerButtons are used for destructive actions such as deleting. They are most likely to appear in confirmation dialogs.

QuietButton

QuietButtons are used for less important actions such as “Cancel” or actions that are not directly related to the context of the page (e.g Learn more …). Quiet buttons are often paired with a Primary button.

Content and UX guidelines

Labelling

Always lead with an actionable verb.
Whenever possible follow with a clear noun (e.g: Create shipment, Approve delivery).
Always use sentence case.

Grouping

Use the ButtonGroup component to associate a group of buttons together.
Order buttons in a group from most important on the left to least important on the right.
Only have one PrimaryButton or DangerButton on the page at one time

Props

Name	Type	Default	Description
children	react node		Content for button
disabled	boolean	false	Marks the button as disabled and unable to be interacted with.
size	enum	medium	Whether the Button should be small, medium or large.
fullWidth	boolean	false	Whether the Button should take the full width of it's container or not.
asLink	boolean	false	If true, the button will use an <a/> tag
icon	enum		The icon to display. Accepts icon names from the Icon component.
iconSide	enum		Whether to display the icon to the left or the right of the text.