Button

A styled <button> with MavKit’s variant/size system, a loading state, and an optional pinned Badge.

Usage


import { Button } from '@mav-labs-inc/mavkit-react'
import { Bell } from 'lucide-react'
 
<Button variant="outline" size="sm" loading={saving}>
  Save
</Button>
 
<Button icon badge={3} aria-label="Notifications">
  <Bell size={18} />
</Button>

Examples

Variants

Sizes

States

With a badge

Set badge to pin a Badge to the button’s top-right corner — useful for unread counts on icon buttons. badgeVariant (default 'danger') and badgeSize (default 'sm') style it.

3new

Props

Button accepts every native <button> attribute in addition to the props below.

Prop	Type	Default	Description
variant	'filled' \| 'filled-secondary' \| 'filled-danger' \| 'filled-success' \| 'outline' \| 'outline-secondary' \| 'outline-danger' \| 'ghost' \| 'raised' \| 'raised-secondary' \| 'raised-danger'	—	Visual style.
size	'sm' \| 'md' \| 'lg' \| 'xl'	—	Button size.
full	boolean	—	Stretch to fill the width of its container.
icon	boolean	—	Square, icon-only layout.
loading	boolean	false	Shows a spinner and sets aria-busy; also disables the button.
badge	ReactNode	—	Renders a Badge pinned to the button's top-right corner (e.g. an unread count).
badgeVariant	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'danger'	Badge variant when badge is set.
badgeSize	'sm' \| 'md' \| 'lg'	'sm'	Badge size when badge is set.

Styling a custom element as a button

buttonClasses — the class-name generator Button calls internally — is also exported directly, for styling a non-<button> element (an <a>, for instance) the same way:


import { buttonClasses } from '@mav-labs-inc/mavkit-react'
 
<a href="/docs" className={buttonClasses({ variant: 'outline' })}>
  Docs
</a>