components

Button

Buttons communicate actions to the users. Buttons are used throughout the Skedulo platform to enable functionality such as confirming actions, filtering, opening dialogs, adding or deleting selections, and progressing through processes.

Import

import { Button } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Trigger actions like submit, save, delete.
+Open dialogs or modals.
+Toggle states.

When not to use

−Navigate to other pages — use Link instead.
−Display status — use Lozenge or Badge instead.
−Select from options — use InputSelect or InputRadio instead.

Examples

Code Samples

Default

A standard button with a text label. Without specifying a buttonType, the button renders as a secondary button.

import { Button } from "@skedulo/breeze-ui-react";

export default function DefaultButton() {
  return <Button>Default Button</Button>;
}

Variants

Buttons come in four variants: primary for main actions, secondary for general actions, transparent for low-emphasis actions, and transparent-primary for low-emphasis actions with primary coloring.

import { Button } from "@skedulo/breeze-ui-react";

export default function ButtonVariants() {
  return (
    <div className="flex gap-3">
      <Button buttonType="primary">Primary</Button>
      <Button buttonType="secondary">Secondary</Button>
      <Button buttonType="transparent">Transparent</Button>
      <Button buttonType="transparent-primary">Transparent Primary</Button>
    </div>
  );
}

Compact

Use the compact prop for a smaller button suitable for dense UIs or toolbars.

import { Button } from "@skedulo/breeze-ui-react";

export default function ButtonCompact() {
  return (
    <div className="flex items-center gap-3">
      <Button compact>Compact Default</Button>
      <Button compact buttonType="primary">Compact Primary</Button>
      <Button compact buttonType="transparent">Compact Transparent</Button>
    </div>
  );
}

With Icons

Buttons can include a leading icon (before the label) or a trailing icon (after the label) using the leadingIcon and trailingIcon props.

import { Button } from "@skedulo/breeze-ui-react";

export default function ButtonWithIcons() {
  return (
    <div className="flex gap-3">
      <Button leadingIcon="plus">Leading Icon</Button>
      <Button trailingIcon="chevronDown">Trailing Icon</Button>
      <Button leadingIcon="plus" buttonType="primary">Add Item</Button>
    </div>
  );
}

Loading State

The loading prop shows a spinner and prevents further clicks.

import { Button } from "@skedulo/breeze-ui-react";

export default function ButtonLoading() {
  return (
    <div className="flex gap-3">
      <Button loading>Loading</Button>
      <Button loading buttonType="primary">Loading Primary</Button>
    </div>
  );
}

Disabled

Disabled buttons are non-interactive and visually muted.

import { Button } from "@skedulo/breeze-ui-react";

export default function ButtonDisabled() {
  return (
    <div className="flex gap-3">
      <Button disabled>Disabled Default</Button>
      <Button disabled buttonType="primary">Disabled Primary</Button>
      <Button disabled buttonType="transparent">Disabled Transparent</Button>
    </div>
  );
}

Button Group

Use ButtonGroup to group related buttons together. Grouped buttons are visually connected with shared borders.

import { Button, ButtonGroup } from "@skedulo/breeze-ui-react";

export default function ButtonGroupExample() {
  return (
    <ButtonGroup>
      <Button>Left</Button>
      <Button>Center</Button>
      <Button>Right</Button>
    </ButtonGroup>
  );
}

Guidelines

Do

✓Use primary for the single most important action per page section.
✓Use secondary as the default button type.
✓Use compact in dense UIs and toolbars.
✓Pair icons with text labels for clarity.
✓Use loading state during async operations.

Don't

✗Don't use more than one primary button per section.
✗Don't use buttons for navigation — use Link instead.
✗Don't disable without explaining why — use a tooltip.
✗Don't put long text in buttons.

CSS Custom Properties

Token	Value	Description
--brz-button-color	var(--brz-color-neutral-900)	The text color of the button. Varies by variant and state.
--brz-button-background-color	var(--brz-color-white)	The background color of the button. Varies by variant and state.
--brz-button-border-color	var(--brz-color-neutral-300)	The border color of the button. Varies by variant and state.

API Reference

Prop	Type	Default	Description
buttonType	"primary" \| "secondary" \| "transparent" \| "transparent-primary"	"secondary"	The visual style variant of the button. Primary buttons are used for the most important action, secondary for general actions, transparent for low-emphasis actions, and transparent-primary for low-emphasis actions with primary coloring.
compact	boolean	false	Renders the button in a compact size with reduced padding, suitable for dense UIs or inline actions.
disabled	boolean	false	Prevents user interaction and applies a disabled visual style.
loading	boolean	false	Shows a loading spinner inside the button and disables interaction.
leadingIcon	string	—	The name of the Breeze icon to display before the button label.
trailingIcon	string	—	The name of the Breeze icon to display after the button label.

Related Components

Badge Link DropdownButton