Buttons

Use buttons for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Primary buttons

Use primary buttons for...

import { ButtonKind, ButtonSize } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";

button({ kind: ButtonKind.Primary, size: ButtonSize.ExtraSmall, autofocus: true }, "Button text"),
button({ kind: ButtonKind.Primary, size: ButtonSize.Small }, "Button text"),
button({ kind: ButtonKind.Primary, size: ButtonSize.Medium }, "Button text"),
button({ kind: ButtonKind.Primary, size: ButtonSize.Large }, "Button text"),
button({ kind: ButtonKind.Primary, size: ButtonSize.ExtraLarge }, "Button text"),

Secondary buttons

Use secondary buttons for...

import { ButtonKind, ButtonSize } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";

button({ kind: ButtonKind.Secondary, size: ButtonSize.ExtraSmall }, "Button text"),
button({ kind: ButtonKind.Secondary, size: ButtonSize.Small }, "Button text"),
button({ kind: ButtonKind.Secondary, size: ButtonSize.Medium }, "Button text"),
button({ kind: ButtonKind.Secondary, size: ButtonSize.Large }, "Button text"),
button({ kind: ButtonKind.Secondary, size: ButtonSize.ExtraLarge }, "Button text"),

Plain buttons

Use plain buttons for...

import { ButtonKind, ButtonSize } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";

button({ kind: ButtonKind.Plain, size: ButtonSize.ExtraSmall }, "Button text"),
button({ kind: ButtonKind.Plain, size: ButtonSize.Small }, "Button text"),
button({ kind: ButtonKind.Plain, size: ButtonSize.Medium }, "Button text"),
button({ kind: ButtonKind.Plain, size: ButtonSize.Large }, "Button text"),
button({ kind: ButtonKind.Plain, size: ButtonSize.ExtraLarge }, "Button text"),

Destructive buttons

Use destructive buttons for...

import { ButtonKind, ButtonSize } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";

button({ kind: ButtonKind.Destructive, size: ButtonSize.ExtraSmall }, "Button text"),
button({ kind: ButtonKind.Destructive, size: ButtonSize.Small }, "Button text"),
button({ kind: ButtonKind.Destructive, size: ButtonSize.Medium }, "Button text"),
button({ kind: ButtonKind.Destructive, size: ButtonSize.Large }, "Button text"),
button({ kind: ButtonKind.Destructive, size: ButtonSize.ExtraLarge }, "Button text"),

Secondary destructive buttons

Use secondary destructive buttons for...

import { ButtonKind, ButtonSize } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";

button({ kind: ButtonKind.SecondaryDestructive, size: ButtonSize.ExtraSmall }, "Button text"),
button({ kind: ButtonKind.SecondaryDestructive, size: ButtonSize.Small }, "Button text"),
button({ kind: ButtonKind.SecondaryDestructive, size: ButtonSize.Medium }, "Button text"),
button({ kind: ButtonKind.SecondaryDestructive, size: ButtonSize.Large }, "Button text"),
button({ kind: ButtonKind.SecondaryDestructive, size: ButtonSize.ExtraLarge }, "Button text"),

Buttons with leading icon

Use buttons with leading icon for...

import { checkmarkBoldIcon } from "@hedia/iconly/bold";
import { ButtonKind, ButtonSize } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";

button({ kind: ButtonKind.Primary, size: ButtonSize.Medium }, checkmarkBoldIcon(), "Button text"),
button({ kind: ButtonKind.Primary, size: ButtonSize.Large }, checkmarkBoldIcon(), "Button text"),
button(
	{ kind: ButtonKind.Primary, size: ButtonSize.ExtraLarge },
	checkmarkBoldIcon(),
	"Button text",
),

Buttons with trailing icon

Use buttons with trailing icon for...

import { checkmarkBoldIcon } from "@hedia/iconly/bold";
import { ButtonKind, ButtonSize } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";

button({ kind: ButtonKind.Primary, size: ButtonSize.Medium }, "Button text", checkmarkBoldIcon()),
button({ kind: ButtonKind.Primary, size: ButtonSize.Large }, "Button text", checkmarkBoldIcon()),
button(
	{ kind: ButtonKind.Primary, size: ButtonSize.ExtraLarge },
	"Button text",
	checkmarkBoldIcon(),
),

Buttons as links

No longer supported. Use links styled as buttons instead.

Rounded primary buttons

Use rounded primary buttons for...

import { ButtonKind, ButtonShape, ButtonSize } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";

button(
	{ kind: ButtonKind.Primary, shape: ButtonShape.Rounded, size: ButtonSize.ExtraSmall },
	"Button text",
),
button(
	{ kind: ButtonKind.Primary, shape: ButtonShape.Rounded, size: ButtonSize.Small },
	"Button text",
),
button(
	{ kind: ButtonKind.Primary, shape: ButtonShape.Rounded, size: ButtonSize.Medium },
	"Button text",
),
button(
	{ kind: ButtonKind.Primary, shape: ButtonShape.Rounded, size: ButtonSize.Large },
	"Button text",
),
button(
	{ kind: ButtonKind.Primary, shape: ButtonShape.Rounded, size: ButtonSize.ExtraLarge },
	"Button text",
),

Rounded secondary buttons

Use rounded secondary buttons for...

import { ButtonKind, ButtonShape, ButtonSize } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";

button(
	{ kind: ButtonKind.Secondary, shape: ButtonShape.Rounded, size: ButtonSize.ExtraSmall },
	"Button text",
),
button(
	{ kind: ButtonKind.Secondary, shape: ButtonShape.Rounded, size: ButtonSize.Small },
	"Button text",
),
button(
	{ kind: ButtonKind.Secondary, shape: ButtonShape.Rounded, size: ButtonSize.Medium },
	"Button text",
),
button(
	{ kind: ButtonKind.Secondary, shape: ButtonShape.Rounded, size: ButtonSize.Large },
	"Button text",
),
button(
	{ kind: ButtonKind.Secondary, shape: ButtonShape.Rounded, size: ButtonSize.ExtraLarge },
	"Button text",
),

Circular buttons

Use circular buttons for...

import { addOutlineIcon } from "@hedia/iconly/outline";
import { ButtonKind, ButtonShape, ButtonSize } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";

button(
	{ kind: ButtonKind.Primary, shape: ButtonShape.Circular, size: ButtonSize.ExtraSmall },
	addOutlineIcon(),
),
button(
	{ kind: ButtonKind.Primary, shape: ButtonShape.Circular, size: ButtonSize.Small },
	addOutlineIcon(),
),
button(
	{ kind: ButtonKind.Primary, shape: ButtonShape.Circular, size: ButtonSize.Medium },
	addOutlineIcon(),
),
button(
	{ kind: ButtonKind.Primary, shape: ButtonShape.Circular, size: ButtonSize.Large },
	addOutlineIcon(),
),
button(
	{ kind: ButtonKind.Primary, shape: ButtonShape.Circular, size: ButtonSize.ExtraLarge },
	addOutlineIcon(),
),

Square buttons

Use square buttons for...

import { bikeBoldIcon, starBoldIcon } from "@hedia/iconly/bold";
import { chevLeftOutlineIcon, deleteOutlineIcon, runOutlineIcon } from "@hedia/iconly/outline";
import { ButtonKind, ButtonShape, ButtonSize } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";

button(
	{ kind: ButtonKind.Secondary, shape: ButtonShape.Square, size: ButtonSize.ExtraSmall },
	chevLeftOutlineIcon(),
),
button(
	{ kind: ButtonKind.Primary, shape: ButtonShape.Square, size: ButtonSize.Small },
	runOutlineIcon(),
),
button(
	{ kind: ButtonKind.Plain, shape: ButtonShape.Square, size: ButtonSize.Medium },
	bikeBoldIcon(),
),
button(
	{ kind: ButtonKind.SecondaryDestructive, shape: ButtonShape.Square, size: ButtonSize.Large },
	starBoldIcon(),
),
button(
	{ kind: ButtonKind.Destructive, shape: ButtonShape.Square, size: ButtonSize.ExtraLarge },
	deleteOutlineIcon(),
),

Disabled buttons

Use disabled buttons for...

import { ButtonKind } from "@hedia/windfall/css/buttons";
import { button } from "@hedia/windfall/html/buttons";

button({ kind: ButtonKind.Primary, disabled: true }, "Button text"),
button({ kind: ButtonKind.Secondary, disabled: true }, "Button text"),
button({ kind: ButtonKind.Plain, disabled: true }, "Button text"),
button({ kind: ButtonKind.SecondaryDestructive, disabled: true }, "Button text"),
button({ kind: ButtonKind.Destructive, disabled: true }, "Button text"),