Faet/hng 178 components button/style guide

[shuaibu-shehu]

CustomeButton Component Documentation

Overview

The CustomeButton component is a reusable button component with customizable features, supporting different variants, sizes, and optional icons. It also supports an href prop to convert the button into a link.

Props

The CustomeButton component accepts the following props:

leftIcon (optional)

• Type: React.ReactNode
• Description: An optional element to be displayed as the left icon inside the button.

rightIcon (optional)

• Type: React.ReactNode
• Description: An optional element to be displayed as the right icon inside the button.

isLoading (optional)

• Type: boolean
• Description: Displays a spinner on the left side when true.

href (optional)

• Type: string
• Description: An optional URL for converting the button into a link.

variant (optional)

• Type: Variant
• Default: "default"
• Description: Specifies the button style variant. Accepted values are:
  • "default"
  • "primary"
  • "destructive"
  • "subtle"
  • "loading"
  • "outline"
  • "secondary"
  • "ghost"
  • "link"

size (optional)

• Type: Size
• Default: "default"
• Description: Specifies the button size. Accepted values are:
  • "default"
  • "sm"
  • "lg"
  • "link"
  • "icon"
  • "circle"

icon (optional)

• Type: React.ReactNode
• Description: Text or elements to be displayed inside the button.

children (optional)

• Type: React.ReactNode
• Description: Child elements to be displayed inside the button.

isIconOnly (optional)

• Type: boolean
• Description: Indicates if the button is icon-only.

isLeftIconVisible (optional)

• Type: boolean
• • Default.true
• Description: Indicates if the left icon is visible.

isRightIconVisible (optional)

• Type: boolean
• Default.true
• Description: Indicates if the right icon is visible.

isDisabled (optional)

• Type: boolean
• Description: Disables the button if true.

ariaLabel (optional)

• Type: string
• Description: Provides an accessible label for the button.

Usage

Basic Usage

Example 1
import React from 'react';
import CustomeButton from './CustomeButton';
import { IconName } from 'your-icon-library';

function App() {
  return (
    <div>
      <CustomeButton variant="primary" size="lg">
        Click Me
      </CustomeButton>
    </div>
  );
}



 Example 2
import React from 'react';
import CustomeButton from './CustomeButton';
import { LoaderIcon } from 'your-icon-library';

function App() {
  return (
    <div>
      <CustomeButton variant="loading" isLoading={true} icon={<LoaderIcon />}>
        Loading...
      </CustomeButton>
    </div>
  );
}

Example 3
import React from 'react';
import CustomeButton from './CustomeButton';

function App() {
  return (
    <div>
      <CustomeButton variant="link" href="https://example.com">
        Visit Example
      </CustomeButton>
    </div>
  );
})