Button
A flexible React button component with multiple predefined variants for common use cases like adding, removing, submitting, searching, and closing actions.<Button
children: ReactNode
icon?: ReactNode
type?: "button" | "submit" | "reset"
variant?: "default" | "green" | "destructive" | "teal" | "secondary"
size?: "default" | "sm" | "icon"
isDisabled?: boolean
loading?: boolean
{...rest: React.ButtonHTMLAttributes<HTMLButtonElement>}
> : JSX.Element
- children: Content to display inside the button.
- icon: Optional ReactNode displayed alongside the content.
- type: Specifies the button type. Defaults to
"button"
. - variant: Defines the visual style of the button. Defaults to
"default"
. - size: Specifies the button size. Defaults to
"default"
. - isDisabled: Disables the button when
true
. Defaults tofalse
. - loading: Displays a loading spinner when
true
. Defaults tofalse
. - rest: Additional props passed to the underlying button element.
Example
import { Button } from "@explita/daily-toolset/form";
function App() {
return (
<div>
<Button variant="default" size="default">Default Button</Button>
<Button.Add>Add New</Button.Add>
<Button.Remove>Remove</Button.Remove>
<Button.Submit loading>Submit Form</Button.Submit>
<Button.Search>Search</Button.Search>
<Button.Close>Close</Button.Close>
</div>
);
}
Use Cases
- Creating reusable buttons with consistent styles across an application.
- Using predefined buttons for common actions like "Add", "Remove", or "Submit".
- Enhancing UX with loading indicators and icon support.