Skip to main content

​
Overview

The Button component is used to trigger actions in your application. It supports text, icons, multiple variants, sizes, colors, and loading states.

​
Basic Usage

import { NSButton } from '@newtonschool/grauity';

function MyComponent() {
  return (
    <NSButton 
      variant="primary" 
      color="brand"
      onClick={() => console.log('Clicked!')}
    >
      Click Me!
    </NSButton>
  );
}

​
Props

​
variant
string
default:"primary"
Variant of the button.Available choices: primary (solid), secondary (outlined), tertiary (borderless), text (transparent background and no padding)
​
color
string
default:"brand"
Color theme of the button.Available choices: brand, neutral, error, success, warning, yellow, purple
​
size
string
default:"medium"
Size of the button.Available choices: extra-small, small, medium, large, extra-large
​
icon
grauityIconName
Icon to be displayed in the button.
​
iconSize
grauityIconSizeName
default:"20"
Size of the icon.
​
iconPosition
string
default:"left"
Position of the icon.Available choices: left, right
​
disabled
boolean
default:false
Show that the button is inactive.
​
loading
boolean
default:false
Show that the button is in loading state. Displays a loading spinner.
​
fullWidth
boolean
default:false
Make the button take full width of its container.
​
type
string
default:"button"
HTML button type attribute.Available choices: button, submit, reset
​
onClick
function
Function to be called when the button is clicked.
​
className
string
Additional CSS classes to be added to the component.
​
style
React.CSSProperties
Additional inline styles to be applied to the element.
​
tooltip
string
Tooltip text to be displayed on hover (uses the title attribute).
​
ariaLabel
string
Aria label for accessibility.
​
tabIndex
number
Tab index of the button for keyboard navigation.
​
showAnimationOnClick
boolean
default:true
Show button animation on click (scales to 95% of its size).
​
onMouseEnter
function
Function to be called on mouse enter event.
​
onMouseLeave
function
Function to be called on mouse leave event.

​
Variants

Buttons come in four visual variants: 
<NSButton variant="primary" color="brand">
  Primary Button
</NSButton>

​
Colors

<NSButton variant="primary" color="brand">Brand</NSButton>
<NSButton variant="primary" color="neutral">Neutral</NSButton>
<NSButton variant="primary" color="error">Error</NSButton>
<NSButton variant="primary" color="success">Success</NSButton>
<NSButton variant="primary" color="warning">Warning</NSButton>
<NSButton variant="primary" color="yellow">Yellow</NSButton>
<NSButton variant="primary" color="purple">Purple</NSButton>

​
Sizes

<NSButton size="extra-small">Extra Small</NSButton>
<NSButton size="small">Small</NSButton>
<NSButton size="medium">Medium</NSButton>
<NSButton size="large">Large</NSButton>
<NSButton size="extra-large">Extra Large</NSButton>

​
With Icons

<NSButton 
  variant="primary" 
  icon="sparkle" 
  iconPosition="left"
>
  With Icon
</NSButton>

<NSButton 
  variant="primary" 
  icon="arrow-right" 
  iconPosition="right"
>
  Icon Right
</NSButton>

​
Loading State

<NSButton variant="primary" loading={true}>
  Loading...
</NSButton>

​
Disabled State

<NSButton variant="primary" disabled={true}>
  Disabled Button
</NSButton>

​
Full Width

<NSButton variant="primary" fullWidth={true}>
  Full Width Button
</NSButton>

​
Icon Button

For icon-only buttons, use the IconButton component: 
import { NSIconButton } from '@newtonschool/grauity';

<NSIconButton 
  variant="primary" 
  icon="sparkle" 
  size="medium"
  onClick={() => console.log('Clicked!')}
/>

​
Constants

import { 
  BUTTON_VARIANTS_ENUM, 
  BUTTON_SIZES_ENUM,
  BUTTON_COLORS_ENUM 
} from '@newtonschool/grauity';

// Usage
<NSButton variant={BUTTON_VARIANTS_ENUM.PRIMARY} />

Build docs developers (and LLMs) love

Get started for freeTalk to us