JSPM

@vbss-ui/button

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q37627F
  • License MIT

A customizable and accessible Button component.

Package Exports

  • @vbss-ui/button

Readme

@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