DocsComponents

Button

Flat, raised, and floating actions with the original Material ripple.

Ready

Installation

Terminal

pnpm dlx shadcn@latest add https://react-toolbox.io/r/button.json

New here? Set up your project first. Styles, fonts, and required components are included.

Usage

Use raised for a primary action, floating for an icon action, and disabled when unavailable. This family also exports IconButton and BrowseButton. Give icon-only buttons an aria-label.

Use the Code tab above for a complete example. The import follows your configured UI alias. See Theming to customize colors, spacing, and style slots.

State and callbacks

Button and IconButton do not store application state. Handle onClick and pass disabled or other presentation props from your state.

BrowseButton uses the browser’s file input. Read the selected files from the input event in onChange; file selection cannot be assigned with a value prop. inputRef gives access to the native input when you need to clear it.

API reference

Generated from the installed TypeScript source. Defaults are the values declared by each function; a dash means no parameter default is declared. Forwarded props can use the receiving component’s default. Callback types show the exact arguments passed to your handler.

`Button`

Property	Type	Default
`disabled`	`boolean`	`false`
`ripple`	`boolean`	`true`
`rippleCentered`	`boolean`	`false`
`rippleClassName`	`string`	`—`
`rippleMultiple`	`boolean`	`—`
`rippleSpread`	`number`	`—`
`accent`	`boolean`	`false`
`icon`	`ReactNode`	`—`
`inverse`	`boolean`	`—`
`neutral`	`boolean`	`true`
`primary`	`boolean`	`false`
`classNames`	`ButtonTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`ButtonTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`
`flat`	`boolean`	`—`
`floating`	`boolean`	`—`
`label`	`string`	`—`
`mini`	`boolean`	`—`
`raised`	`boolean`	`—`
`href`	`(undefined) \| (string)`	`—`

Callbacks

Property	Type	Default
`onRippleEnded`	`TransitionEventHandler<HTMLSpanElement>`	`—`

Also inherits ComponentPropsWithRef<'button'>, ComponentPropsWithRef<'a'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Additional defaults on inherited props: className = ''.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

accent
button
flat
floating
icon
inverse
mini
neutral
primary
raised
rippleWrapper
solid
squared
toggle

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

`IconButton`

Property	Type	Default
`disabled`	`boolean`	`false`
`ripple`	`boolean`	`true`
`rippleCentered`	`boolean`	`true`
`rippleClassName`	`string`	`—`
`rippleMultiple`	`boolean`	`—`
`rippleSpread`	`number`	`—`
`accent`	`boolean`	`false`
`icon`	`ReactNode`	`—`
`inverse`	`boolean`	`—`
`neutral`	`boolean`	`true`
`primary`	`boolean`	`false`
`classNames`	`ButtonTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`ButtonTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`
`href`	`(undefined) \| (string)`	`—`

Callbacks

Property	Type	Default
`onRippleEnded`	`TransitionEventHandler<HTMLSpanElement>`	`—`

Additional defaults on inherited props: className = ''.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

accent
button
flat
floating
icon
inverse
mini
neutral
primary
raised
rippleWrapper
solid
squared
toggle

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

`BrowseButton`

Property	Type	Default
`disabled`	`boolean`	`false`
`ripple`	`boolean`	`true`
`rippleCentered`	`boolean`	`false`
`rippleClassName`	`string`	`—`
`rippleMultiple`	`boolean`	`—`
`rippleSpread`	`number`	`—`
`accent`	`boolean`	`false`
`icon`	`ReactNode`	`—`
`inverse`	`boolean`	`—`
`neutral`	`boolean`	`true`
`primary`	`boolean`	`false`
`classNames`	`ButtonTheme` Classes for the component's rendered parts. Applied after legacy theme overrides.	`—`
`theme`Deprecated alias	`ButtonTheme` Use classNames for style slots; use ThemeProvider for design tokens.	`—`
`flat`	`boolean`	`—`
`floating`	`boolean`	`—`
`label`	`string`	`—`
`mini`	`boolean`	`—`
`raised`	`boolean`	`—`
`accept`	`string`	`'/'`
`multiple`	`boolean`	`false`
`name`	`string`	`—`
`inputRef`	`Ref<HTMLInputElement>`	`—`

Callbacks

Property	Type	Default
`onRippleEnded`	`TransitionEventHandler<HTMLSpanElement>`	`—`
`onChange`	`ChangeEventHandler<HTMLInputElement>`	`—`

Also inherits Omit<ComponentPropsWithRef<'label'>, 'onChange'>, except the omissions and overrides in its exported props type below. Use the supported native aria-*, data-*, event, and element attributes as appropriate.

Additional defaults on inherited props: className = ''.

Style slots

Pass a map of Tailwind classes to classNames. Available keys:

accent
button
flat
floating
icon
inverse
mini
neutral
primary
raised
rippleWrapper
solid
squared
toggle

theme is the deprecated compatibility alias. When both are provided, classNames wins conflicting utilities within each slot. See Theming for tokens and override rules.

Exported TypeScript types

Expand a type to inspect its full declaration, including generic constraints, union branches, callback arguments, ref handles, and inherited props. Import these types from @/components/ui/material/button.

ButtonProps

tsx

type ButtonProps = ButtonAppearanceProps & ButtonShapeProps & ButtonNativeProps;

IconButtonProps

tsx

type IconButtonProps = ButtonAppearanceProps & ButtonNativeProps;

BrowseButtonProps

tsx

interface BrowseButtonProps
  extends Omit<ComponentPropsWithRef<'label'>, 'onChange'>,
    ButtonAppearanceProps,
    ButtonShapeProps {
  accept?: string;
  multiple?: boolean;
  name?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  inputRef?: Ref<HTMLInputElement>;
}

ButtonTheme

tsx

type ButtonTheme = Partial<
  Record<
    | 'accent'
    | 'button'
    | 'flat'
    | 'floating'
    | 'icon'
    | 'inverse'
    | 'mini'
    | 'neutral'
    | 'primary'
    | 'raised'
    | 'rippleWrapper'
    | 'solid'
    | 'squared'
    | 'toggle',
    string
  >
>;

ButtonClassNames

tsx

type ButtonClassNames = ButtonTheme;

ButtonAppearanceProps

tsx

interface ButtonAppearanceProps extends RippleProps {
  accent?: boolean;
  disabled?: boolean;
  icon?: ReactNode;
  inverse?: boolean;
  neutral?: boolean;
  primary?: boolean;
  /** Classes for the component's rendered parts. Applied after legacy theme overrides. */
  classNames?: ButtonTheme;
  /** @deprecated Use classNames for style slots; use ThemeProvider for design tokens. */
  theme?: ButtonTheme;
}

ButtonShapeProps

tsx

interface ButtonShapeProps {
  flat?: boolean;
  floating?: boolean;
  label?: string;
  mini?: boolean;
  raised?: boolean;
}

Material guidelines

Use flat buttons in dialogs and toolbars. A raised button adds emphasis where the surrounding layout needs a more prominent action.
The standard text button has a 36px visible height, an 88px minimum width, and a 48px touch target. Use concise action labels and retain the built-in press feedback.
Reserve a floating action button for the screen’s primary action; give its icon an accessible name.

Material Design 1: Buttons