[FEAT] - Components → Buttons/Style Guide

[crystal4000]

Description

Create reusable Button components with customizable features. The components should also support an optional href prop to convert it into a link.

Acceptance Criteria

• The Button components are implemented according to the design specifications.
• Ensure accessibility standards are met, including appropriate aria attributes and semantic HTML.

Disclaimer

• Do not create these components: Button with Left Icon, Right Icon, and Loading Spinner

---

Requirements

The Button Component should have these types:

• `type Variant =

  | "default"
  | "primary"
  | "destructive"
  | "subtle"
  | "loading"
  | "outline"
  | "secondary"
  | "ghost"
  | "link";`

• type Size = "default" | "sm" | "lg" | "link" | "icon" | "circle";

The Button component should have the following props:

• leftIcon?: React.ReactElement (optional element for left icon)
• rightIcon?: React.ReactElement (optional element for right icon)
• isLoading?: boolean (displays a spinner on the left side when true)
• href?: string (optional URL for converting the button into a link))
• variant?: Variant (Specifies the button style variant )
• size?: Size (Icon to be displayed inside the button)
• icon?: React.ReactNode (Text or elements to be displayed inside the button)
• children?: React.ReactNode (Indicates if the button is in a loading state)
• isIconOnly?: boolean ( Indicates if the button is icon only)
• isLeftIconVisible?: boolean ( Indicates if the left icon is visible )
• isRightIconVisible?: boolean ( Indicates if the right icon is visible )
• isDisabled?: boolean (Disables the button if true )
• ariaLabel?: string (Href to link button to a URL or route )

Tasks

• Component Development: Develop the Button components based on the provided requirements.
• Icon Customization: Implement customization options for left and right icons.
• Rounded Corners: Implement rounded corners option.
• Link Behavior: Implement optional link behavior with the href prop.
• Accessibility Testing: Ensure the button meets accessibility standards.
• Documentation: Update documentation with usage instructions.
• Guide: Create the guides folder and add the usage instructions

---

Figma Design

---

Link

• Figma Design: Buttons Component

[KehindeDaniels]

@shuaibu-shehu has your pr on this been merged

[shuaibu-shehu]

@shuaibu-shehu has your pr on this been merged

no, I dropped it someone did it already