Docs
Button

Button

A customizable button component for triggering actions in your application.

Features

  • Customizable: Easily adjust the button's variant, size, and appearance.
  • Keyboard Shortcuts: Assign keyboard shortcuts for enhanced user interactions.
  • Tooltip Integration: Display tooltips with custom delay and content.
  • Icon Support: Include icons alongside text or as standalone elements.
  • Collapsible: Optionally collapse the button to save space.
  • Loading State: Display a loading spinner or icon while actions are in progress, hiding other content.

Installation

npx duck-ui@latest add button

Usage

import React from 'react'
import { Button, TooltipProvider } from '@/components/ui'
import { Inbox } from 'lucide-react'
<TooltipProvider>
  <Button
    icon={Inbox}
    title={'Inbox'}
    label={'4'}
  />
</TooltipProvider>

Button

Button is a versatile and customizable React component designed to render a button with various styles and functionalities. It supports different sizes, variants, and additional features like loading states and icons. The component is flexible and can be used in a variety of scenarios, from simple buttons to complex interactive elements.

Example Usage:

import { Button } from "@/components/ui";
 
const MyButton = () => {
  return (
    <Button
      size="large"
      variant="primary"
      title="Submit"
      label="Submit"
      icon={<Icon type="submit" />}
      loading={false}
      onClick={() => console.log("Button clicked")}
    >
      Submit
    </Button>
  );
};

Description:

The Button component provides a highly customizable button element that can be styled and configured according to your needs. It supports various props for styling, loading states, and additional features.

Key Features:

  • Customizable Styles: Supports different sizes and variants, allowing you to style the button according to your design needs.

  • Loading State: Provides a loading state to indicate that an action is in progress, enhancing user feedback.

  • Icon Support: Allows for the inclusion of one or two icons, providing additional visual elements or functionality.

  • Accessibility: Includes a label prop for accessibility, ensuring the button is properly described for screen readers.

  • Custom Rendering: The asChild prop enables custom rendering of the button, making it versatile for various use cases.

  • Command Execution: Supports executing commands or functions through the command prop, integrating with application logic.

Link

You can use the buttonVariants helper to create a any element like a link that looks like a button.

import { buttonVariants, TooltipProvider } from '@/components/ui'
<Link className={buttonVariants({ variant: 'outline' })}>Click me</Link>

Alternatively, you can set the asChild parameter and nest the link component.

<TooltipProvider>
  <Button asChild>
    <Link href="/login">Login</Link>
  </Button>
</TooltipProvider>

Examples

Simple

Advanced

Here's the documentation for the IconType, ButtonProps, LabelType, and CommandType:

API Reference

ButtonProps

ButtonProps extends standard HTML button attributes and adds additional properties specific to button components.

Key Properties

  • asChild (boolean, optional): When true, renders the button as a child of another component, typically for styling purposes.

  • isCollapsed (boolean, optional): When true, indicates that the button is in a collapsed state.

  • icon (IconType, optional): Specifies an icon to be displayed within the button.

  • title (string, optional): Provides a title for the button, typically used for accessibility.

  • secondIcon (IconType, optional): An optional second icon to be displayed alongside the primary icon.

  • label (IconType, optional): Provides additional label configuration, including optional tooltip properties.

  • route (string, optional): Specifies a route or URL to navigate to when the button is clicked.

  • command (CommandType, optional): Defines a command to be executed when the button is clicked, including optional label and state.

  • delayDuration (number, optional): Specifies the delay duration in milliseconds for button interactions.

  • loading (boolean, optional): When true, indicates that the button is in a loading state, typically showing a spinner or loading indicator.

LabelType

LabelType defines the properties for a label component, including optional tooltip content.

Key Properties

  • showCommand (boolean, optional): When true, shows a command associated with the label.

  • showLabel (boolean, optional): When true, shows the label text.

  • type ('notification' | 'default', optional): Specifies the type of label, such as notification or default styling.

CommandType

CommandType defines the structure for a command, including optional action and state.

Key Properties

  • label (string, optional): The label or name of the command.

  • key (string): A unique key identifier for the command.

  • state (unknown, optional): Optional state associated with the command, allowing for dynamic behavior based on state.

  • action (<T>(arg?: T) => void, optional): An optional action function to be executed when the command is triggered.

IconType

IconType defines the structure for an icon component.

Key Properties

  • icon (LucideIcon): The icon component from the Lucide library. Defines the icon to be used.

  • IconProps: Additional properties specific to the icon component, extending React.SVGProps<SVGSVGElement>.

  • React.RefAttributes<SVGSVGElement>: Allows for passing a ref to the underlying SVG element.

BadgeCombobox