@vbss-ui/button

a customizable and accessible Button component.

The Button component is a flexible UI element used to trigger actions or events. It supports various visual styles, sizes, shapes, and states, making it suitable for a wide range of interfaces.

Installation

To install only the Button component, run one of the following commands:

npm install @vbss-ui/button
# or
yarn add @vbss-ui/button

---

Usage

import { Button } from "@vbss-ui/button"

export const App = () => {
  return <Button>Click Me</Button>
}

---

Props

Prop	Type	Description	Default
variant	primary | secondary | outline | outlineSolid | ghost	Defines the visual style of the Button.	primary
size	xs | sm | md | lg | xl | icon-xs | icon-sm | icon-md | icon-lg | icon-xl	Defines the size or icon-specific size of the Button.	md
rounded	none | xs | sm | md | lg | full	Sets the border radius of the Button.	md
fontSize	xs | sm | md | lg | xl	Sets the font size of the Button text.	md
fontWeight	thin | light | normal | medium | bold | extrabold	Specifies the font weight of the Button text.	normal
inverted	boolean	Inverts the Button's direction.	false
disabled	boolean	Disables the Button interaction.	false
as	React.ElementType	Defines the HTML element or component to render.	button
ref	React.Ref	Allows accessing the underlying DOM element.	-
children	React.ReactNode	Content to be displayed inside the button.	-
className	string	Additional CSS classes for custom styling.	-
style	React.CSSProperties	Additional style for custom styling.	-

---

Customization

You can extend the default styles by passing custom styles names using className or style.

  <Button
    style={{
      backgroundColor: "red"
    }}
  >
    Click Me
  </Button>

Or you can use the default component className chip.

.button {
  background-color: purple;
}

import "./custom.css";

export const App = () => {
  return <Button>Click Me</Button>;
}

Customizing Colors (Optional)

If you want to customize the colors used in the vbss-ui components, you can create a custom CSS file with your desired color scheme. Create a .css file (e.g., custom-colors.css) and define your colors using HSL format as follows:

:root {
  --background: 0 0% 100%;
  --primary: 117 100% 47%;
  --secondary: 248 53% 58%;
}

After creating your custom colors file, import it into your main file:

import "./custom-colors.css";

This will override the default colors with your custom colors.

---

More

For more information, please visit the repository or check out the documentation at ui.vbss.io/button.

To see the components in action, run Storybook locally. Navigate to the repository directory and execute:

npm run storybook