Button

Buttons are used to trigger actions. They are used in forms, dialogs, and toolbars.

Size

The prop size can be used to change the size of the button.

Buttons come in three sizes: small, medium, large, xl and 2xl.

import React from "react";
import { Button } from "@firecms/ui";

export default function ButtonSizeDemo() {
    return (
        <>
            <Button
                size={"small"}
                onClick={() => console.log("Button clicked")}>
                Small
            </Button>
            <Button onClick={() => console.log("Button clicked")}>
                Medium
            </Button>
            <Button
                size={"large"}
                onClick={() => console.log("Button clicked")}>
                Large
            </Button>
            <Button
                size={"xl"}
                onClick={() => console.log("Button clicked")}>
                XLarge
            </Button>
            <Button
                size={"2xl"}
                onClick={() => console.log("Button clicked")}>
                XXLarge
            </Button>
        </>
    );
}

Variant

The variant prop changes the button's style. Possible values are filled, outlined, and text.

import React from "react";
import { Button } from "@firecms/ui";

export default function VariantButtonDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button variant="filled">
                Filled Button
            </Button>
            <Button variant="outlined">
                Outlined Button
            </Button>
            <Button variant="text">
                Text Button
            </Button>
        </div>
    );
}

Disabled

Setting disabled to true disables the button, preventing interactions.

import React from "react";
import { Button } from "@firecms/ui";

export default function DisabledButtonDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button disabled>
                Disabled Button
            </Button>
        </div>
    );
}

Start Icon

The startIcon prop allows you to include an icon before the button's content.

import React from "react";
import { AddIcon, Button } from "@firecms/ui";

export default function StartIconButtonDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button startIcon={<AddIcon/>}>
                Button with Icon
            </Button>
        </div>
    );
}

Full Width

The fullWidth prop makes the button expand to take up the full width of its container.

import React from "react";
import { Button } from "@firecms/ui";

export default function FullWidthButtonDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button fullWidth>
                Full Width Button
            </Button>
        </div>
    );
}

Custom Class Name

The className prop allows you to pass custom CSS classes to the button component.

import React from "react";
import { Button } from "@firecms/ui";

export default function CustomClassNameButtonDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button className="bg-red-500 hover:bg-red-600">
                Button with Custom Class
            </Button>
        </div>
    );
}