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.

Overview

The Button component is used to display buttons in your application. This documentation provides instructions on how to use the Button component in your React projects. The Button component is a part of the abaabil.button library.

Importing the Button Component

You can import the Button component from the abaabil package or directly from the abaabil.button package.

import { Button } from 'abaabil';
// or
import Button from 'abaabil.button';

Usage Example

The Button component can be used in your JSX to display buttons with various properties. You can customize the button by setting its properties such as icon, actionIcon, variant, size, disabled, outlined, and className.

import * as React from 'react';
import Button from 'abaabil.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;

More Usage Examples

Filled Variants

import * as React from 'react';
import Button from 'abaabil.button';

const FilledVariantsExample = () => (
  <div className="flex flex-wrap gap-4">
    <Button icon="photo">Primary</Button>
    <Button variant="secondary" icon="photo">Secondary</Button>
    <Button variant="tertiary" icon="photo">Tertiary</Button>
    <Button variant="success" icon="photo">Success</Button>
    <Button variant="error" icon="photo">Error</Button>
  </div>
);

export default FilledVariantsExample;

Disabled Filled Variants

import * as React from 'react';
import Button from 'abaabil.button';

const DisabledFilledVariantsExample = () => (
  <div className="flex flex-wrap gap-4">
    <Button icon="photo" disabled>Primary</Button>
    <Button variant="secondary" icon="photo" disabled>Secondary</Button>
    <Button variant="tertiary" icon="photo" disabled>Tertiary</Button>
    <Button variant="success" icon="photo" disabled>Success</Button>
    <Button variant="error" icon="photo" disabled>Error</Button>
  </div>
);

export default DisabledFilledVariantsExample;

Outlined Variants

import * as React from 'react';
import Button from 'abaabil.button';

const OutlinedVariantsExample = () => (
  <div className="flex flex-wrap gap-4">
    <Button icon="photo" outlined>Primary</Button>
    <Button variant="secondary" icon="photo" outlined>Secondary</Button>
    <Button variant="tertiary" icon="photo" outlined>Tertiary</Button>
    <Button variant="success" icon="photo" outlined>Success</Button>
    <Button variant="error" icon="photo" outlined>Error</Button>
  </div>
);

export default OutlinedVariantsExample;

Disabled Outlined Variants

import * as React from 'react';
import Button from 'abaabil.button';

const DisabledOutlinedVariantsExample = () => (
  <div className="flex flex-wrap gap-4">
    <Button icon="photo" outlined disabled>Primary</Button>
    <Button variant="secondary" icon="photo" outlined disabled>Secondary</Button>
    <Button variant="tertiary" icon="photo" outlined disabled>Tertiary</Button>
    <Button variant="success" icon="photo" outlined disabled>Success</Button>
    <Button variant="error" icon="photo" outlined disabled>Error</Button>
  </div>
);

export default DisabledOutlinedVariantsExample;

Sizes

import * as React from 'react';
import Button from 'abaabil.button';

const ButtonSizesExample = () => (
  <div className="flex flex-wrap gap-4">
    <Button size="sm" icon="photo">Small</Button>
    <Button icon="photo">Base</Button>
    <Button size="lg" icon="photo">Large</Button>
  </div>
);

export default ButtonSizesExample;

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 'abaabil.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.