Scalar UI
Marketing UIApp UIAIChartsBackgrounds
Sign inGet started
Scalar UI
Scalar UI© 2026 Scalar Limited

React · Tailwind CSS · Motion

Browse

HomeAll components 213

Collections

Marketing UI 107App UI 94AI 16Charts 45Backgrounds 2Text 43

More

Text 43

Getting started

Installation

Primitives

AccordionsAlert DialogsAlerts2Aspect RatiosAvatars2BadgesBreadcrumbsButton GroupsButtons2CalendarsCheckboxesCollapsiblesComboboxesCommand MenusContext MenusDate PickersDialogsDropdown MenusEmpty StatesFields2FormsHover CardsInput OTPInputs3KbdMenubarsNavigation MenusPaginationPassword InputsPopoversProgress2Radio GroupsResizableScroll AreasSelectsSeparatorsSheetsSkeletonsSlidersSpinnersSwitchesTablesTabsToastsToggles2ToolbarsTooltipsSortablesStatus DotsTree ViewsFile UploadsSteppers

Layouts

SidebarsNavbarsApp Shells

Blocks

SchedulersBoards3CanvasesWorkflowsAI apps4Developer tools3AuthenticationOnboardingSettingsPricing & upgrades2Help & feedback4System pages7Admin console

Other

Cards

Resources

Docs & installScalar Design
App UIPrimitives

Buttons

Tactile, animated calls to action.

Shimmer Button

Members

A pill button with a light sweep that glides across its surface.

motion · lucide-react

PreviousButton GroupsNextCalendars

On this page

ButtonDefaultSecondaryOutlineGhostDestructiveColorsHighlightRaisedPillSquareSizeIconWith IconLoadingAs LinkShimmer Button

Button

Seven variants, six colors, three shapes and four sizes on a Radix Slot, so links and router links can wear button styles through asChild.

radix-ui

Default

The primary action on a page or in a form.

Secondary

A quieter action that sits next to the primary one.

Outline

A bordered button for neutral actions.

Ghost

No fill until hover, for toolbars and dense UI.

Destructive

For actions that delete or can't be undone.

Colors

Every variant takes a color. Pick one to see the whole set change.

Highlight

variant="highlight": a glossy top sheen and a colored glow that brightens on hover.

Raised

variant="raised": an inner border and a bottom edge that press down on click.

Pill

shape="pill" gives fully rounded ends.

Square

shape="square" removes the corner radius.

Size

Use the size prop: sm, md (default), lg or icon.

Icon

Square icon-only buttons. Give each one an aria-label.

With Icon

Put a lucide icon before the label; it's sized for you.

Loading

Disable the button and show a spinning icon while work runs.

As Link

Use asChild to give a link, or a router Link, button styles.