A customizable button component for React with various styles and sizes.
npm install abaabil.button
import React from 'react';
import Button from 'abaabil.button';
function MyApp() {
return (
<Button
size="medium"
text="Click me"
type="button"
variant="primary"
iconName="myIcon"
style={{ color: 'red' }}
onClick={() => console.log('clicked')}
disabled={false}
className="my-button"
ariaPressed={false}
/>
);
}
-
size
(string, default:medium
): Size of the button.-
small
: Smaller button with reduced padding and font size. -
medium
: Regular sized button. -
large
: Larger button with increased padding and font size.
-
-
text
(string): Text to display inside the button. -
type
(string, default:button
): HTML button type attribute. Options are:button
submit
reset
-
variant
(string, default:primary
): Style variant of the button. Options include:-
primary
: Primary color scheme button. -
secondary
: Secondary color scheme button. -
success
: Indicates success with a green color scheme. -
warning
: Indicates caution with a yellow color scheme. -
danger
: Indicates danger or a negative action with a red color scheme. -
info
: Informational, typically displayed with a blue color scheme.
-
-
iconName
(string): Name of the icon from abaabil.icon. -
style
(object): Inline styles for the button element. -
onClick
(function): Handler function to be called when the button is clicked. -
disabled
(boolean, default: false): Disable the button when true. -
className
(string): Additional CSS class name(s) to be applied. -
ariaPressed
(boolean, default: false): ARIA pressed state.
import React from 'react';
import Button from 'abaabil.button';
function MyApp() {
return (
<>
<Button
size="medium"
text="Click me"
type="button"
variant="primary"
iconName="myIcon"
style={{ color: 'red' }}
onClick={() => console.log('clicked')}
disabled={false}
className="my-button"
ariaPressed={false}
/>
<Button
size="small"
text="Click me"
type="submit"
variant="secondary"
iconName="myIcon"
style={{ color: 'red' }}
onClick={() => console.log('clicked')}
disabled={false}
className="my-button"
ariaPressed={false}
/>
<Button
size="large"
text="Click me"
type="reset"
variant="success"
iconName="myIcon"
style={{ color: 'red' }}
onClick={() => console.log('clicked')}
disabled={false}
className="my-button"
ariaPressed={false}
/>
</>
);
}
MIT