import { Button } from "@brijbyte/md3-react/button";@import "@brijbyte/md3-react/button.css";Pick a size and every dimension follows: height, padding, icon size, typescale, and outline
width all scale together, so you never hand-tune one property and leave the rest mismatched.
Five sizes (xsmall–xlarge) cover the expressive spec; small is the default.
Toggle buttons (toggle, Base UI Toggle underneath) flip shape and color on selection to make
the state obvious at a glance; there is no text-variant toggle. Plain buttons never morph shape
on press — that's reserved for ButtonGroup's connected variant (see below).
import { IconButton } from "@brijbyte/md3-react/icon-button";@import "@brijbyte/md3-react/button.css";
@import "@brijbyte/md3-react/icon-button.css";Same component, no separate toggle variant to import — the middle two of each row are toggles, so click them to see the state change in place.
Need a denser toolbar or a roomier tap target without changing the icon size? Adjust the width
independently of size: narrow/default/wide change padding only (height and icon stay fixed
per size), across five expressive sizes. shape="square" and toggles use the same round/square
shapes as common buttons.
For the one action a screen can't let you miss, FABs (floating action buttons) sit above the surface instead of inline with the rest of the content.
import { Fab } from "@brijbyte/md3-react/fab";@import "@brijbyte/md3-react/button.css";
@import "@brijbyte/md3-react/fab.css";Add a label and any size becomes an extended FAB, no separate component to swap in. Sizes run
from the 56dp baseline up to the expressive medium (80dp) and large (96dp), and colors come
in two families — soft *-container (default) or bold tone roles — so you can match how much
visual weight the action deserves. The 40dp small FAB and surface colors are deprecated by the
expressive update.
Fab renders only the button, so you keep full control over where it sits — position it
yourself, typically position: fixed in the bottom-right corner with the spec's 16dp margin
from the screen edges (pass a className or style). One thing easy to miss: since the FAB
covers whatever scrolls beneath it, give the content enough bottom padding (FAB height +
margins, ~88px for the baseline size) so the last elements can still scroll up past it. Here
the FAB is position: absolute inside the mock screen so it stays put while the content
scrolls.
import { SplitButton, SplitButtonAction, SplitButtonMenu } from "@brijbyte/md3-react/split-button";@import "@brijbyte/md3-react/button.css";
@import "@brijbyte/md3-react/split-button.css";Pair a primary action with a set of related ones without cluttering the UI: a leading action
button fuses with a trailing menu button (2dp gap), and clicking the chevron opens a real
Menu anchored to it (Menu > MenuTrigger render={<SplitButtonMenu />} >
MenuContent) — so you get full menu behavior, not a custom dropdown. Inner corners morph on
hover/press, and the menu button rounds fully with a 180° icon spin when open.
import { ButtonGroup } from "@brijbyte/md3-react/button-group";@import "@brijbyte/md3-react/button-group.css";
/* plus the css of the children, e.g. button.css / icon-button.css */Group related buttons without losing each one's individual shape: 12dp spacing keeps them visually tied while staying separate elements. Press and hold one and it grows 15% wider, with its neighbors compressing to absorb the change.
For a tighter, single-control look, buttons fuse into one pill: 2dp gaps, 8dp inner corners, full outer corners. Selected toggles round fully, and press-and-hold a toggle to see the inner corners tighten.