Skip to content

feat(button): rework the button-family API #239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sriramveeraghanta merged 2 commits into from
Jul 24, 2026
Merged

feat(button): rework the button-family API #239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
347c505
feat(button): rework the button-family API
sriramveeraghanta Jul 24, 2026
f915ed4
fix(docs): repair avatar and breadcrumb demos broken since #224
sriramveeraghanta Jul 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .changeset/button-family-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
"@makeplane/propel": minor
---

Rework the button-family API (`Button`, `IconButton`, `SplitButton`, `ButtonGroup`,
`AnchorButton`): merge `prominence` + `tone` into a single `variant` axis (`primary` /
`secondary` / `tertiary` / `ghost` / `danger` / `danger-outline`), rename `magnitude` to `size`
and `sizing` to `fillType`, replace `startIcon`/`endIcon` with one `icon` prop plus
`iconPosition` (`"start"` default, `"end"` to trail — the `loading` spinner takes the same
slot), and add explicit `disabled` and `type` (`"button"` default; `submit` / `reset`) props.
10 changes: 4 additions & 6 deletions apps/docs/src/components/react/MobileNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,8 @@ export default function MobileNav({ groups, currentPath }: Props) {
<DrawerTrigger
render={
<IconButton
prominence="ghost"
tone="neutral"
magnitude="lg"
variant="ghost"
size="lg"
aria-label="Open navigation"
icon={<Icon icon={Menu} />}
/>
Expand All @@ -47,9 +46,8 @@ export default function MobileNav({ groups, currentPath }: Props) {
<DrawerClose
render={
<IconButton
prominence="ghost"
tone="neutral"
magnitude="lg"
variant="ghost"
size="lg"
aria-label="Close navigation"
icon={<Icon icon={X} />}
/>
Expand Down
5 changes: 2 additions & 3 deletions apps/docs/src/components/react/ThemeToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,8 @@ export default function ThemeToggle() {

return (
<IconButton
prominence="ghost"
tone="neutral"
magnitude="lg"
variant="ghost"
size="lg"
aria-label={`Theme: ${mode ?? "light"}. Switch to ${next}`}
icon={<Icon icon={glyph} />}
onClick={() => {
Expand Down
14 changes: 6 additions & 8 deletions apps/docs/src/demos/accordion/controlled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,16 @@ export default function ControlledDemo() {
<div className="flex flex-col gap-3">
<div className="flex flex-wrap items-center gap-2">
<Button
prominence="secondary"
tone="neutral"
magnitude="sm"
sizing="hug"
variant="secondary"
size="sm"
fillType="hug"
label="Expand all"
onClick={() => setValue(ITEMS.map((item) => item.value))}
/>
<Button
prominence="secondary"
tone="neutral"
magnitude="sm"
sizing="hug"
variant="secondary"
size="sm"
fillType="hug"
label="Collapse all"
onClick={() => setValue([])}
/>
Expand Down
21 changes: 9 additions & 12 deletions apps/docs/src/demos/alert-dialog/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,9 @@ export default function BasicDemo() {
return (
<AlertDialog>
<Button
sizing="hug"
prominence="primary"
tone="danger"
magnitude="xl"
fillType="hug"
variant="danger"
size="xl"
render={<AlertDialogTrigger />}
label="Delete project"
/>
Expand All @@ -39,18 +38,16 @@ export default function BasicDemo() {
</AlertDialogHeader>
<AlertDialogActions>
<Button
sizing="hug"
prominence="secondary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="secondary"
size="xl"
render={<AlertDialogClose />}
label="Cancel"
/>
<Button
sizing="hug"
prominence="primary"
tone="danger"
magnitude="xl"
fillType="hug"
variant="danger"
size="xl"
render={<AlertDialogClose />}
label="Delete"
/>
Expand Down
21 changes: 9 additions & 12 deletions apps/docs/src/demos/alert-dialog/multiple-triggers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,9 @@ export default function MultipleTriggersDemo() {
{["Mobile app", "Design system"].map((project) => (
<Button
key={project}
sizing="hug"
prominence="secondary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="secondary"
size="xl"
render={<AlertDialogTrigger handle={deleteProjectHandle} payload={project} />}
label={`Delete ${project}`}
/>
Expand All @@ -53,18 +52,16 @@ export default function MultipleTriggersDemo() {
</AlertDialogHeader>
<AlertDialogActions>
<Button
sizing="hug"
prominence="secondary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="secondary"
size="xl"
render={<AlertDialogClose />}
label="Cancel"
/>
<Button
sizing="hug"
prominence="primary"
tone="danger"
magnitude="xl"
fillType="hug"
variant="danger"
size="xl"
render={<AlertDialogClose />}
label="Delete"
/>
Expand Down
21 changes: 9 additions & 12 deletions apps/docs/src/demos/alert-dialog/open-from-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,9 @@ export default function OpenFromMenuDemo() {
<>
<Menu>
<Button
sizing="hug"
prominence="secondary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="secondary"
size="xl"
render={<MenuTrigger />}
label="Project options"
/>
Expand All @@ -49,18 +48,16 @@ export default function OpenFromMenuDemo() {
</AlertDialogHeader>
<AlertDialogActions>
<Button
sizing="hug"
prominence="secondary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="secondary"
size="xl"
render={<AlertDialogClose />}
label="Cancel"
/>
<Button
sizing="hug"
prominence="primary"
tone="danger"
magnitude="xl"
fillType="hug"
variant="danger"
size="xl"
render={<AlertDialogClose />}
label="Delete"
/>
Expand Down
84 changes: 36 additions & 48 deletions apps/docs/src/demos/alert-dialog/tones.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,9 @@ export default function TonesDemo() {
<div className="flex flex-wrap items-center gap-3">
<AlertDialog>
<Button
sizing="hug"
prominence="primary"
tone="danger"
magnitude="xl"
fillType="hug"
variant="danger"
size="xl"
render={<AlertDialogTrigger />}
label="Delete project"
/>
Expand All @@ -40,18 +39,16 @@ export default function TonesDemo() {
</AlertDialogHeader>
<AlertDialogActions>
<Button
sizing="hug"
prominence="secondary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="secondary"
size="xl"
render={<AlertDialogClose />}
label="Cancel"
/>
<Button
sizing="hug"
prominence="primary"
tone="danger"
magnitude="xl"
fillType="hug"
variant="danger"
size="xl"
render={<AlertDialogClose />}
label="Delete"
/>
Expand All @@ -61,10 +58,9 @@ export default function TonesDemo() {

<AlertDialog>
<Button
sizing="hug"
prominence="secondary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="secondary"
size="xl"
render={<AlertDialogTrigger />}
label="Archive project"
/>
Expand All @@ -83,18 +79,16 @@ export default function TonesDemo() {
</AlertDialogHeader>
<AlertDialogActions>
<Button
sizing="hug"
prominence="secondary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="secondary"
size="xl"
render={<AlertDialogClose />}
label="Cancel"
/>
<Button
sizing="hug"
prominence="primary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="primary"
size="xl"
render={<AlertDialogClose />}
label="Archive"
/>
Expand All @@ -104,10 +98,9 @@ export default function TonesDemo() {

<AlertDialog>
<Button
sizing="hug"
prominence="secondary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="secondary"
size="xl"
render={<AlertDialogTrigger />}
label="Transfer ownership"
/>
Expand All @@ -126,18 +119,16 @@ export default function TonesDemo() {
</AlertDialogHeader>
<AlertDialogActions>
<Button
sizing="hug"
prominence="secondary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="secondary"
size="xl"
render={<AlertDialogClose />}
label="Cancel"
/>
<Button
sizing="hug"
prominence="primary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="primary"
size="xl"
render={<AlertDialogClose />}
label="Transfer"
/>
Expand All @@ -147,10 +138,9 @@ export default function TonesDemo() {

<AlertDialog>
<Button
sizing="hug"
prominence="secondary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="secondary"
size="xl"
render={<AlertDialogTrigger />}
label="Restore project"
/>
Expand All @@ -168,18 +158,16 @@ export default function TonesDemo() {
</AlertDialogHeader>
<AlertDialogActions>
<Button
sizing="hug"
prominence="secondary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="secondary"
size="xl"
render={<AlertDialogClose />}
label="Cancel"
/>
<Button
sizing="hug"
prominence="primary"
tone="neutral"
magnitude="xl"
fillType="hug"
variant="primary"
size="xl"
render={<AlertDialogClose />}
label="Restore"
/>
Expand Down
2 changes: 1 addition & 1 deletion apps/docs/src/demos/anchor-button/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { AnchorButton } from "@makeplane/propel/components/anchor-button";

export default function BasicDemo() {
return <AnchorButton label="Show more" prominence="primary" magnitude="md" />;
return <AnchorButton label="Show more" variant="primary" size="md" />;
}
2 changes: 1 addition & 1 deletion apps/docs/src/demos/anchor-button/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { AnchorButton } from "@makeplane/propel/components/anchor-button";

export default function LoadingDemo() {
return <AnchorButton label="Saving project…" prominence="primary" magnitude="md" loading />;
return <AnchorButton label="Saving project…" variant="primary" size="md" loading />;
}
12 changes: 0 additions & 12 deletions apps/docs/src/demos/anchor-button/magnitudes.tsx
View file
Open in desktop

This file was deleted.

10 changes: 0 additions & 10 deletions apps/docs/src/demos/anchor-button/prominences.tsx
View file
Open in desktop

This file was deleted.

12 changes: 12 additions & 0 deletions apps/docs/src/demos/anchor-button/sizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { AnchorButton } from "@makeplane/propel/components/anchor-button";

export default function SizesDemo() {
return (
<div className="flex flex-wrap items-center gap-4">
<AnchorButton label="Show more" variant="primary" size="sm" />
<AnchorButton label="Show more" variant="primary" size="md" />
<AnchorButton label="Show more" variant="primary" size="lg" />
<AnchorButton label="Show more" variant="primary" size="xl" />
</div>
);
}
Loading
Loading