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
Parameters
  • 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 to false.
  • loading: Displays a loading spinner when true. Defaults to false.
  • 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.