abaabil.button

Button Component

The Button component is a versatile and customizable button component built with React. It supports different variants, sizes, icons, and states, making it suitable for a wide range of use cases.

Usage

import * as React from 'react';
import Button from './path-to-button';

const App = () => (
  <div>
    <Button variant="primary" size="base">Primary Button</Button>
    <Button variant="secondary" size="lg" icon="settings">Secondary Button</Button>
    <Button variant="success" size="sm" actionIcon="check" fullWidth>Success Button</Button>
    <Button variant="error" outlined>Outlined Error Button</Button>
    <Button variant="tertiary" disabled>Tertiary Disabled Button</Button>
  </div>
);

export default App;

Props

Prop	Type	Default	Description
as	string	button	The HTML element or React component to render.
icon	string	null	Icon to display in the button. Uses the Icon component.
actionIcon	string	null	Icon to display on the right side of the button. Uses the Icon component.
variant	string	primary	The button variant. Can be primary, secondary, tertiary, success, or error.
size	string	base	The size of the button. Can be sm, base, or lg.
disabled	boolean	false	Whether the button is disabled.
outlined	boolean	false	Whether the button is outlined.
children	node	null	The content of the button.
isPressed	boolean	false	The pressed state of the button.
className	string	''	Additional class names to apply to the button.
fullWidth	boolean	false	Whether the button should take the full width of its container.
rounded	boolean	false	Whether the button should have rounded corners.
...props	object	{}	Additional props to pass to the button.

Variants

• primary: Default button style with primary background and text.
• secondary: Secondary button style with secondary background and text.
• tertiary: Tertiary button style with tertiary background and text.
• success: Success button style with success background and text.
• error: Error button style with error background and text.

Sizes

• sm: Small button size.
• base: Base button size.
• lg: Large button size.

States

• Disabled: Button with disabled prop applied. Can be combined with outlined for different styles.
• Outlined: Button with outlined prop applied.

Icons

• icon: Icon to display in the button, using the Icon component.
• actionIcon: Icon to display on the right side of the button, using the Icon component.

Example

import * as React from 'react';
import Button from './path-to-button';

const Example = () => (
  <div>
    <Button variant="primary" size="base">Primary Button</Button>
    <Button variant="secondary" size="lg" icon="settings">Secondary Button</Button>
    <Button variant="success" size="sm" actionIcon="check" fullWidth>Success Button</Button>
    <Button variant="error" outlined>Outlined Error Button</Button>
    <Button variant="tertiary" disabled>Tertiary Disabled Button</Button>
  </div>
);

export default Example;

This example demonstrates various ways to use the Button component, showcasing different variants, sizes, icons, and states.