Stable

Button

Buttons help people take actions, such as sending an email, sharing a document, or liking a comment. Five variants cover the full emphasis range, from elevated and filled down to text.

M3 Spec
open_in_new

Overview

The Button component implements the Material Design 3 Buttons pattern: five emphasis levels (elevated, filled, tonal, outlined, text), each available in any color role, plus a chrome-less bare variant.

Under the hood it renders Bits UI's Button.Root, wraps content with the shared Layer state-layer/ripple overlay, and supports a leading icon, a loading state, and rendering as an <a> via href.

Import

import { Button } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here.

widgets

Playground

Variant, color, size, shape, disabled, and loading Controls.
widgets

Variants

All six variants side by side.

Basic Usage

Pick a variant matching the action's emphasis, and a color role matching its concept:

<script lang="ts">
  import { Button } from '@noxlovette/material';
</script>

<Button variant="filled" color="primary" iconProps={{ name: 'send' }}>
  Send
</Button>

<Button variant="outlined" color="primary">Cancel</Button>

Button Props

PropTypeDefaultDescription
children required
Snippet—The label content rendered inside the button.
variant
"elevated" | "filled" | "tonal" | "outlined" | "text" | "bare""filled"Visual emphasis: elevated/filled highest, tonal medium-high, outlined medium, text/bare lowest.
color
"default" | "primary" | "secondary" | "tertiary" | "error""default"Color role. "default" resolves to the same styling as "primary".
size
"xs" | "sm" | "md" | "lg" | "xl""md"Controls height, padding, and typescale.
shape
"round" | "square""round"Fully rounded or slightly rounded corners.
iconProps
IconProps—Optional leading icon, passed directly to the Icon component.
disabled
booleanfalseDisables the button.
selected
booleanfalseMarks the button as selected. Combine with usage="selection" (used internally by Toggle).
usage
"default" | "selection""default"Set to "selection" to scope selected-state styling instead of variant/color styling.
loading
booleanfalseShows a LoadingIndicator in place of the icon/label and disables interaction.
href
string—Renders the button as an <a> instead of a <button>.
formaction
string—The formaction attribute, for use as a form submit button.

Accessibility

touch_app

Native semantics

Renders Bits UI's Button.Root as a native <button> (or <a> when href is set), giving default keyboard activation and role support.

block

Disabled state

disabled removes the button from the tab order and exposes the disabled attribute to assistive tech.

hourglass_top

Loading state

loading swaps the content for a LoadingIndicator while keeping the button's footprint stable.