Button

The Button component is a versatile UI element that supports multiple style and size variants, ideal for various use cases such as standard actions, destructive actions, secondary options, ghost styles, and icon-only buttons. It also includes an optional loading state.

Example

Preview

Code

import React from 'react';
import { Button } from '@hv/ui/button';
import { ArrowRight, ArrowDown } from 'lucide-react';

export default function ButtonExample({ variant, size, isLoading, icon }) {
  const iconMap = {
    arrow: <ArrowRight className='h-7 w-7' />,
    loader: <ArrowDown className='h-7 w-7' />,
  };

  return (
    <div className='bg-muted flex h-40 flex-col items-start justify-center px-20'>
      <Button
        variant={variant}
        size={size}
        isLoading={isLoading}
        icon={icon ? iconMap[icon] : null}
        className='px-5'
      >
        Button
      </Button>
    </div>
  );
}

Configurations

Property	Description	Values
className	Custom CSS classes for styling the button	String
variant	Button style variant	default destructive secondary ghost icon link
size	Button size	default sm lg icon fit
asChild	Renders the button as a child element using <Slot>	true false
icon	Optional icon to display with button	<IconComponent>
isLoading	Displays loading spinner when true	true false
disabled	Disables the button	true false
onClick	Click event handler	Function
title	Tooltip text for screen readers	String

Features

The Button component builds on native HTML button capabilities, offering enhanced customization options while maintaining familiar accessibility and interaction patterns.

• Loading State: The button can display a loading spinner to indicate a process is ongoing.

• Customizable Variants: Offers various style options tailored to different actions:

  • default: A standard button style for general interactions.
  • destructive: Used for sensitive actions like deleting or removing content.
  • secondary: Subtle styling suitable for secondary actions that are less prominent.
  • ghost: A minimalist style with no background.
  • icon: Designed to accommodate icon-only buttons.
  • link: Styled to appear like a text link.

• Responsive Sizing: Various sizes make the button adaptable to different interfaces and screen sizes:

  • default: Standard button size.
  • sm: Compact button suitable for tighter spaces or mobile.
  • lg: Larger button for emphasis or spacious layouts.
  • icon: Fixed-size for icon-only buttons, often used in toolbars.
  • fit: No extra padding.

• Icon Support: Supports optional icons that can be displayed alongside or as the main button content.

• Flexible Styling with className: Accepts additional classes for further customization.

• Accessible Structure with asChild: The button can be rendered as a different element, such as a link, by setting the asChild prop, which wraps the button in a Slot to inherit button styling and behavior.

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components.

<Button className='rounded-full'>Click Me</Button>