Components
- AccordionNew
- Alert
- Alert DialogNew
- AutocompleteNew
- AvatarNew
- Badge
- Breadcrumb
- Button
- CalendarNew
- CardNew
- Checkbox
- Checkbox GroupNew
- CollapsibleNew
- ComboboxNew
- CommandNew
- Context MenuNew
- Date PickerNew
- DialogNew
- DrawerNew
- EmptyNew
- FieldNew
- FieldsetNew
- FormNew
- FrameNew
- GroupNew
- Input
- Input GroupNew
- KbdNew
- Label
- MenuNew
- MeterNew
- Number Field
- OTP FieldNew
- Pagination
- PopoverNew
- Preview CardNew
- Progress
- Radio Group
- Scroll AreaNew
- Select
- Separator
- SheetNew
- SkeletonNew
- Slider
- Spinner
- StepperNew
- Switch
- Table
- TabsNew
- Textarea
- ToastNew
- ToggleNew
- Toggle GroupNew
- ToolbarNew
- Tooltip
Button
A button or a component that looks like a button.
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button>Button</Button>;
}
Usage
import { Button } from "mako-ui/components/button"<Button>Button</Button>Link
You can use the render prop to make another component look like a button. Here's an example of a link that looks like a button.
import Link from "next/link"
import { Button } from "mako-ui/components/button"
export function LinkAsButton() {
return <Button render={<Link href="/login" />}>Login</Button>
}API Reference
This is a custom component built with a render-prop API.
Button
A button component with variant, size, and loading states.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "success" | "tertiary" | "ghost" | "link" | "outline" | "secondary" | "default" | Controls the button styling |
size | "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | "default" | Controls the button size |
loading | boolean | false | Shows a spinner and forces disabled button behavior while loading |
render | React.ReactElement | - | Render as a different element (e.g., Link) |
When loading is true, the component:
- Renders a spinner (
data-slot="button-loading-indicator") - Adds
data-loadingon the button root - Forces the native
disabledattribute - Sets
aria-disabled="true" - Preserves button width by hiding content visually instead of unmounting it
Examples
Default
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button>Button</Button>;
}
Outline
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button variant="outline">Outline</Button>;
}
Secondary
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button variant="secondary">Secondary</Button>;
}
Destructive
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button variant="destructive">Delete</Button>;
}
Success
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button variant="success">Success</Button>;
}
Tertiary
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button variant="tertiary">Tertiary</Button>;
}
Ghost
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button variant="ghost">Ghost</Button>;
}
Link
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button variant="link">Link</Button>;
}
Extra-small Size
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button size="xs">Button</Button>;
}
Small Size
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button size="sm">Button</Button>;
}
Large Size
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button size="lg">Button</Button>;
}
Extra-large Size
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button size="xl">Button</Button>;
}
Disabled
import { Button } from "mako-ui/components/button";
export default function Particle() {
return <Button disabled>Button</Button>;
}
Icon
import { Button } from "mako-ui/components/button";
import { Plus } from "mako-ui/icons/plus";
export default function Particle() {
return (
<Button aria-label="Add" size="icon">
<Plus aria-hidden="true" />
</Button>
);
}
Icon Small Size
import { Button } from "mako-ui/components/button";
import { Plus } from "mako-ui/icons/plus";
export default function Particle() {
return (
<Button aria-label="Add" size="icon-sm">
<Plus aria-hidden="true" />
</Button>
);
}
Icon Large Size
import { Button } from "mako-ui/components/button";
import { Plus } from "mako-ui/icons/plus";
export default function Particle() {
return (
<Button aria-label="Add" size="icon-lg">
<Plus aria-hidden="true" />
</Button>
);
}
With Icon
import { Button } from "mako-ui/components/button";
import { Download } from "mako-ui/icons/download";
export default function Particle() {
return (
<Button>
<Download aria-hidden="true" />
Download
</Button>
);
}
With Link
import { Button } from "mako-ui/components/button";
import Link from "next/link";
export default function Particle() {
return <Button render={<Link href="/" />}>Link</Button>;
}
Loading (Built-in Prop)
"use client";
import { Button } from "mako-ui/components/button";
import { useState } from "react";
export default function Particle() {
const [isLoading, setIsLoading] = useState(false);
const handleClick = () => {
setIsLoading(true);
globalThis.setTimeout(() => {
setIsLoading(false);
}, 1000);
};
return (
<Button loading={isLoading} onClick={handleClick}>
Submit
</Button>
);
}
Loading (Custom Composition)
import { Button } from "mako-ui/components/button";
import { Spinner } from "mako-ui/components/spinner";
export default function Particle() {
return (
<Button disabled>
<Spinner />
Loading...
</Button>
);
}