Skip to main content

​
ButtonProps Interface

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  children: React.ReactNode;
  'aria-label'?: string;
  'aria-describedby'?: string;
}

​
Props

​
variant

​
variant
'primary' | 'secondary' | 'danger'
default:"primary"
Visual style variant of the button.
  • primary: Main action button with primary brand color
  • secondary: Secondary action button with muted color
  • danger: Destructive action button with danger color
Example: 
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger">Delete</Button>

​
size

​
size
'small' | 'medium' | 'large'
default:"medium"
Size of the button affecting padding and font size.
  • small: Compact button (min-height: 2rem)
  • medium: Standard button (min-height: 2.5rem)
  • large: Prominent button (min-height: 3rem)
Example: 
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

​
disabled

​
disabled
boolean
default:"false"
Disables the button, preventing interaction and reducing opacity.
Example: 
<Button disabled>Disabled Button</Button>

​
children

​
children
React.ReactNode
required
Content to be rendered inside the button. Can be text, icons, or other React elements.
Example: 
<Button>Text Content</Button>
<Button><Icon /> With Icon</Button>

​
type

​
type
'button' | 'submit' | 'reset'
default:"button"
HTML button type attribute.
  • button: Standard button
  • submit: Form submission button
  • reset: Form reset button
Example: 
<Button type="submit">Submit Form</Button>
<Button type="reset">Reset</Button>

​
onClick

​
onClick
(event: React.MouseEvent) => void
Click event handler function.
Example: 
<Button onClick={() => console.log('Clicked')}>
  Click me
</Button>

​
className

​
className
string
Additional CSS classes to apply to the button.
Example: 
<Button className="custom-class">Styled Button</Button>

​
aria-label

​
aria-label
string
Accessible label for screen readers. Required for icon-only buttons.
Example: 
<Button aria-label="Close dialog">×</Button>

​
aria-describedby

​
aria-describedby
string
ID of element that describes the button.
Example: 
<Button aria-describedby="save-description">Save</Button>
<span id="save-description" className="sr-only">
  Save your changes
</span>

​
Inherited Props

Button extends React.ButtonHTMLAttributes<HTMLButtonElement>, inheriting all standard HTML button attributes:
  • id
  • name
  • value
  • form
  • formAction
  • formMethod
  • formTarget
  • formNoValidate
  • autoFocus
  • onFocus
  • onBlur
  • onMouseEnter
  • onMouseLeave
  • And all other standard button attributes

​
CSS Classes

ClassDescription
.btnBase button class
.btn--primaryPrimary variant
.btn--secondarySecondary variant
.btn--dangerDanger variant
.btn--smallSmall size
.btn--mediumMedium size
.btn--largeLarge size

​
CSS Variables

VariableDefaultDescription
--primary-color#007bffPrimary button background
--primary-hover#0056b3Primary button hover state
--secondary-color#6c757dSecondary button background
--danger-color#dc3545Danger button background
--font-familySystem fontsButton font family
--border-radius0.375remButton border radius
--transition-baseall 0.2s ease-in-outButton transitions

​
TypeScript

Import the type: 
import { ButtonProps } from '@abdalkader/component-library';

const props: ButtonProps = {
  variant: 'primary',
  size: 'medium',
  children: 'Click me',
};

Button Component

Component documentation

Input Props

Input API reference