@app-studio/components

Button

A versatile button component for user interaction with various styles, sizes, shapes, and interactive effects.

Import

import { Button } from '@app-studio/components';

New to the library? Complete installation and provider setup first.

Interactive examples

Try the component, then open Code to copy the complete example.

Loading preview…

Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

Scroll horizontally to see every column.

Button
Prop	Type	Default	Description
`children`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	Content rendered inside the component.Source
`to`	`string`	`—`	Destination URL or application route.Source
`isLoading`	`boolean`	`—`	Displays the loading state.Source
`loaderProps`	`LoaderProps`	`—`	See the type and source declaration for this property.Source
`loaderPosition`	`LoaderPosition` `"left""right"`	`'left'`	See the type and source declaration for this property.Source
`icon`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	Icon rendered alongside the content.Source
`iconPosition`	`IconPosition` `"bottom""left""right""top"`	`'left'`	Position of the icon relative to the content.Source
`isDisabled`	`boolean`	`—`	Disables user interaction.Source
`isFilled`	`boolean`	`—`	Expands the component to the available width.Source
`isAuto`	`boolean`	`true`	Sizes the component to fit its content.Source
`isIconRounded`	`boolean`	`—`	See the type and source declaration for this property.Source
`onClick`	`((...args: any) => any)`	`—`	Called when the user activates the component.Source
`isExternal`	`boolean`	`—`	Opens an external link in a new browsing context.Source
`isIcon`	`boolean`	`—`	See the type and source declaration for this property.Source
`size`	`Size` `"sm""md""lg""xs""xl"`	`'md'`	Size preset for the component.Source
`shadow`	`ViewProps \| Shadow \| Elevation`	`—`	Shadow or elevation styling.Source
`shape`	`Shape` `"square""rounded""pill"`	`'rounded'`	Shape preset for the component.Source
`ariaLabel`	`string`	`—`	[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaLabel)Source
`variant`	`string`	`'filled'`	Visual treatment of the component.Source
`animation`	`Animation` `"borderMoving""animatedStroke""borderReveal"`	`—`	This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. Syntax: `<single-animation>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-----: \| :----: \| :----: \| \| 43 \| 16 \| 9 \| 12 \| 10 \| \| 3 _-x-_ \| 5 _-x-_ \| 4 _-x-_ \| \| \|Source
`color`	`string`	`—`	This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Syntax: `<color>` Initial value: `canvastext` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| 1 \| 1 \| 1 \| 12 \| 3 \|Source
`textColor`	`string`	`—`	Explicit foreground color for the text.Source
`reversed`	`boolean`	`false`	See the type and source declaration for this property.Source
`borderMovingDuration`	`number`	`2`	See the type and source declaration for this property.Source
`borderMovingGradientColors`	`string[]`	`['#705CFF', '#FF5C97', '#FFC75C']`	See the type and source declaration for this property.Source
`animatedStrokeAccentColor`	`string`	`'#705CFF'`	See the type and source declaration for this property.Source
`animatedStrokeTextColor`	`string`	`'color-gray-900'`	See the type and source declaration for this property.Source
`views`	`{ container?: ViewProps; content?: ViewProps; loader?: ViewProps; icon?: ViewProps; link?: ViewProps; }`	`{}`	Style overrides for the named internal parts.Source
`config`	`any`	`—`	See the type and source declaration for this property.Source
`keys`	`any[]`	`—`	See the type and source declaration for this property.Source
`label`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	Visible label describing this control.Source
`leftIcon`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source
`rightIcon`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source
`startIcon`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source
`endIcon`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source

Common inherited styling props (6)

Scroll horizontally to see every column.

Button inherited
Prop	Type	Default	Description
`media`	`Record<string, CssProps>`	`—`	See the type and source declaration for this property.
`as`	`keyof JSX.IntrinsicElements` `"symbol""object""slot""style""title""pattern""form""animate""clipPath""filter""marker""mask""a""abbr""address""area""article""aside""audio""b""base""bdi""bdo""big""blockquote""body""br""button""canvas""caption""center""cite""code""col""colgroup""data""datalist""dd""del""details""dfn""dialog""div""dl""dt""em""embed""fieldset""figcaption""figure""footer""h1""h2""h3""h4""h5""h6""head""header""hgroup""hr""html""i""iframe""img""input""ins""kbd""keygen""label""legend""li""link""main""map""mark""menu""menuitem""meta""meter""nav""noindex""noscript""ol""optgroup""option""output""p""param""picture""pre""progress""q""rp""rt""ruby""s""samp""search""script""section""select""small""source""span""strong""sub""summary""sup""table""template""tbody""td""textarea""tfoot""th""thead""time""tr""track""u""ul""var""video""wbr""webview""svg""animateMotion""animateTransform""circle""defs""desc""ellipse""feBlend""feColorMatrix""feComponentTransfer""feComposite""feConvolveMatrix""feDiffuseLighting""feDisplacementMap""feDistantLight""feDropShadow""feFlood""feFuncA""feFuncB""feFuncG""feFuncR""feGaussianBlur""feImage""feMerge""feMergeNode""feMorphology""feOffset""fePointLight""feSpecularLighting""feSpotLight""feTile""feTurbulence""foreignObject""g""image""line""linearGradient""metadata""mpath""path""polygon""polyline""radialGradient""rect""set""stop""switch""text""textPath""tspan""use""view"`	`—`	See the type and source declaration for this property.
`themeMode`	`"light" \| "dark"` `"light""dark"`	`—`	See the type and source declaration for this property.
`_hover`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_active`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_focus`	`string \| CssProps`	`—`	See the type and source declaration for this property.

For shared layout, color, and responsive properties, read Styling & composition and Responsive layouts. Additional native element attributes depend on the target platform.

Usage guidance

Give controls a visible label or an accessible name, and verify keyboard interaction. See Accessibility.
For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
These previews run in the browser. Check React Native setup for platform requirements and differences.