Skip to main content

​
Button

The primary button component for triggering actions in your application. Supports multiple variants, sizes, icons, and loading states.

​
Import

import { Button, IconButton } from 'nightwatch-ui';

​
Basic Usage

<Button onClick={() => console.log('Clicked')}>Click me</Button>

​
With Icon

<Button 
  icon={Icon.Plus}
  onClick={() => console.log('Clicked')}
>
  Add Item
</Button>

​
Variants

// Primary button (default)
<Button type={Type.PRIMARY} onClick={handleClick}>Primary</Button>

// Secondary button
<Button type={Type.SECONDARY} onClick={handleClick}>Secondary</Button>

// Tertiary button
<Button type={Type.TERTIARY} onClick={handleClick}>Tertiary</Button>

// Destructive button
<Button type={Type.DESTRUCTIVE} onClick={handleClick}>Delete</Button>

​
Sizes

<Button size={Size.SMALL} onClick={handleClick}>Small</Button>
<Button size={Size.MEDIUM} onClick={handleClick}>Medium</Button>
<Button size={Size.LARGE} onClick={handleClick}>Large</Button>

​
Loading State

<Button loading onClick={handleClick}>Loading...</Button>

​
Button Props

​
children
string
required
Button text content
​
onClick
(e: React.MouseEvent) => void | Promise<void>
required
Callback fired when the button is clicked
​
type
Type
default:"Type.PRIMARY"
Button variant type. Options:
  • Type.PRIMARY - Primary action button with solid background
  • Type.SECONDARY - Secondary action button with outlined style
  • Type.TERTIARY - Tertiary action button with minimal styling
  • Type.DESTRUCTIVE - Destructive action button (e.g., delete)
​
size
ButtonSize
default:"Size.MEDIUM"
Button size. Options: Size.SMALL, Size.MEDIUM, Size.LARGE
​
icon
Icon | IconComponent
Icon to display at the start of the button
​
loading
boolean
Shows a loading spinner. The button remains clickable unless also disabled
​
disabled
boolean
default:false
Disables the button, preventing clicks and showing disabled state
​
active
boolean
default:false
Controls the active/selected state of the button
​
fullWidth
boolean
default:false
Makes the button expand to fill its container width
​
compact
boolean
default:false
Applies compact styling with reduced padding
​
floatRight
boolean
default:false
Floats the button to the right of its container
​
tooltip
string
Tooltip text displayed on hover
​
forceTheme
ThemeMode
Overrides the current theme (light/dark)
​
className
string
Custom CSS class name for styling
​
style
React.CSSProperties
Inline styles for customization
​
id
string
HTML id attribute
​
dataTest
string
Test identifier for end-to-end tests

​
IconButton

A button component that displays only an icon, useful for compact UIs and toolbars.

​
Basic Usage

<IconButton 
  icon={Icon.Settings}
  onClick={() => console.log('Settings clicked')}
/>

​
With Tooltip

<IconButton 
  icon={Icon.Edit}
  tooltip="Edit item"
  onClick={handleEdit}
/>

​
Variants

// Filled variant (default)
<IconButton 
  icon={Icon.Trash}
  variant={FilledVariant.FILLED}
  onClick={handleDelete}
/>

// Unfilled variant
<IconButton 
  icon={Icon.More}
  variant={FilledVariant.UNFILLED}
  onClick={handleMore}
/>

​
IconButton Props

​
icon
Icon | IconComponent
required
Icon to display in the button
​
onClick
(e: React.MouseEvent) => void | Promise<void>
required
Callback fired when the button is clicked
​
size
ButtonSize
default:"Size.MEDIUM"
Button size. Options: Size.SMALL, Size.MEDIUM, Size.LARGE
​
type
IconButtonType
default:"Type.PRIMARY"
Button type for coloring. Options: Type.PRIMARY, Type.SECONDARY, Type.TERTIARY, Type.DESTRUCTIVE
​
variant
FilledVariant
default:"FilledVariant.FILLED"
Visual variant. Options:
  • FilledVariant.FILLED - Solid background
  • FilledVariant.UNFILLED - Transparent background
​
disabled
boolean
default:false
Disables the button
​
active
boolean
default:false
Controls the active/selected state
​
tooltip
string | JSX.Element
Tooltip content displayed on hover
​
forceTheme
ThemeMode
Overrides the current theme
​
animationProps
HTMLMotionProps<'div'>
Framer Motion animation properties for the icon
​
className
string
Custom CSS class name
​
style
React.CSSProperties
Inline styles
​
id
string
HTML id attribute
​
dataTest
string
Test identifier for e2e tests

Build docs developers (and LLMs) love

Get started for freeTalk to us