Buttons

Buttons make common actions immediately detectable and easy to perform.

import { Button } from "@nulogy/components";

<Button>Create project</Button>

Types of buttons

There are multiple types of buttons that all accept the same options.

PrimaryButton

Primary Buttons 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.

import { PrimaryButton } from "@nulogy/components";

<PrimaryButton>Create project</PrimaryButton>

DangerButton

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

import { DangerButton } from "@nulogy/components";

<DangerButton>Create project</DangerButton>

QuietButton

Quiet Buttons 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.

import { QuietButton } from "@nulogy/components";

<QuietButton>Create project</QuietButton>

Variations

The following variations are available to all button components.

Small

<Button size="small">Read more</Button>

Medium

<Button size="medium">Read more</Button>

Large

<Button size="large">Read more</Button>

Full Width

<Button fullWidth>Full Width</Button>

With an icon

<Button icon="add" iconSide="left">Create project</Button>

Disabled

<Button disabled>Create project</Button>

Content guidelines

Button labeling

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

Button grouping

  • Use the Button Group 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

NameTypeDefaultDescription

size

String

medium

Accepts small, medium, or large.

disabled

Boolean

false

Marks the button as disabled and unable to be activated.

icon

String

null

The icon to display. See Icons for all possible options.

iconSide

String

right

The side to display the icon.

fullWidth

Boolean

false

Makes the button fill the width of its container.

className

String

undefined

className passed to the button component.

asLink

Boolean

false

When set, renders the button as an <a> link instead of a <button>.

Button components also has access to space style props. See the style prop documentation for a full list of available props.