Botão (Button)

Os botões são elementos de UI interativos que permitem aos usuários acionar ações ou eventos específicos dentro de uma aplicação. Eles desempenham um papel crucial nas interfaces de usuário, fornecendo uma dica visual para ações iniciadas pelo usuário. Os botões podem ser usados em vários contextos, incluindo formulários para envio, diálogos para confirmação, e barras de ferramentas para acesso rápido a funções e recursos. Ao clicar em um botão, os usuários podem enviar dados, abrir novas janelas, executar comandos e muito mais, tornando os botões um componente essencial para impulsionar a interação e engajamento do usuário.

Tamanho

A prop size pode ser usada para alterar o tamanho do botão.

Os botões vêm em três tamanhos: small, medium, large, xl e 2xl.

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

export default function ButtonSizeDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <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>
        </div>
    );
}

Variante

A prop variant altera o estilo do botão. Os valores possíveis são filled, outlined e 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 color="neutral">
                Neutral Button
            </Button>
            <Button variant="outlined">
                Outlined Button
            </Button>
            <Button variant="text">
                Text Button
            </Button>
        </div>
    );
}

Cor

A prop color define o tema de cor do botão. Os valores possíveis são primary, secondary, text, error e neutral.

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

export default function ButtonColorDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button color="primary">
                Primary
            </Button>
            <Button color="secondary">
                Secondary
            </Button>
            <Button color="text">
                Text
            </Button>
            <Button color="error">
                Error
            </Button>
            <Button color="neutral">
                Neutral
            </Button>
        </div>
    );
}

Desabilitado

Definir disabled como true desabilita o botão, impedindo interações.

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>
    );
}

Ícone inicial

A prop startIcon permite incluir um ícone antes do conteúdo do botão.

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>
    );
}

Largura total

A prop fullWidth faz o botão expandir para ocupar toda a largura do seu contêiner.

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

export default function FullWidthButtonDemo() {
    return (
        <Button fullWidth>
            Full Width Button
        </Button>
    );
}

Nome de classe personalizado

A prop className permite que você passe classes CSS personalizadas para o componente botão.

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 border-red-600 hover:ring-red-600">
                Button with Custom Class
            </Button>
        </div>
    )
}

Props do componente Button

• variant: Define a variante de estilo do botão. As opções são "filled", "outlined" ou "text". Padrão: "filled".
• disabled: Desabilita o botão, impedindo a interação do usuário. Padrão: false.
• color: Define o tema de cor do botão. As opções são "primary", "secondary", "neutral", "text" ou "error".
• size: Especifica o tamanho do botão. As opções são "small", "medium", "large", "xl" ou "2xl". Padrão: "medium".
• startIcon: Adiciona um ícone no início do conteúdo do botão.
• fullWidth: Quando true, o botão se expande para preencher a largura do contêiner. Padrão: false.
• className: Classes adicionais para aplicar ao elemento do botão.
• onClick: Função manipuladora chamada quando o botão é clicado.
• children: Define o conteúdo do botão, tipicamente texto ou elementos.
• component: Componente personalizado a ser usado para renderizar o botão.
• type: O atributo type do botão, tipicamente "button", "submit" ou "reset". Padrão: "button".