Button

Actions with clear hierarchy and accessible interaction states.

Interactive playground

LIVE PREVIEW

Generated code

import { Button } from '@vrum/ui';

<Button
  variant={"primary"}
  size={"md"}
  disabled={false}
  isLoading={false}
  fullWidth={false}
>
  {"Create project"}
</Button>

Button props

Prop	Type	Default	Description
`variant`	`"destructive" \| "primary" \| "secondary" \| "outline" \| "ghost" \| "link"`	`"primary"`	Visual hierarchy.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "2lg" \| "3lg" \| "icon"`	`"md"`	Control size.
`iconOnly`	`boolean`	`false`	icon only configuration.
`destructive`	`boolean`	`false`	destructive configuration.
`asChild`	`boolean`	`false`	as child configuration.
`loadingText`	`string`	none	loading text configuration.
`loading`	`boolean`	`false`	Show the loading state.
`isLoading`	`boolean`	`false`	Show a spinner and disable interactions.
`fullWidth`	`boolean`	`false`	Fill the available width.
`leftIcon`	`React.ReactNode`	none	left icon configuration.
`rightIcon`	`React.ReactNode`	none	right icon configuration.
`disabled`	`boolean`	`false`	Disable interactions.
`name`	`string`	none	name configuration.
`type`	`"submit" \| "reset" \| "button"`	`"button"`	type configuration.
`value`	`string \| number \| readonly string[]`	none	Controlled value.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Button label.
`onFocus`	`FocusEventHandler<HTMLButtonElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLButtonElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLButtonElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLButtonElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLButtonElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLButtonElement>`	none	on select configuration.

Button

Interactive playground

Props

Button props