Design System

Visual Style

Components

Patterns

Resources

Button Group

Button Groups associate a set of related buttons together.

import { ButtonGroup, Button, PrimaryButton } from "@nulogy/components";

<ButtonGroup>
  <PrimaryButton>Button</PrimaryButton>
  <Button>Button</Button>
  <Button>Button</Button>
</ButtonGroup>

Use when

  • Always use the Button Group component when there are multiple buttons beside each other.

Variations

Right-aligned

Button alignment is set to right when grouping actions associated with pages, tables, lists, or records.

import { ButtonGroup, Button, PrimaryButton } from "@nulogy/components";

<ButtonGroup alignment="right">
  <PrimaryButton>Button</PrimaryButton>
  <Button>Button</Button>
  <Button>Button</Button>
</ButtonGroup>

Spaced

Button alignment is set to spaced when dealing with multi-step flows with previous and next buttons.

import { ButtonGroup, Button, PrimaryButton } from "@nulogy/components";

<ButtonGroup alignment="spaced">
  <PrimaryButton>Button</PrimaryButton>
  <Button>Button</Button>
  <Button>Button</Button>
</ButtonGroup>

Props

NameTypeDefaultDescription

alignment

String

left

Aligns the buttons within the group. One of left, spaced, or right.

className

String

undefined

className passed to the button group component

Related components

Resources