app-studio

Text

Render semantic text with typography, color tokens, emphasis, and line limits. Choose the appropriate element with as and customize its styling through props.

View component source

Import

import { Text } from 'app-studio';

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…

import React from 'react';
import { Text, Vertical } from 'app-studio';

export function TextExample() {
  return (
    <Vertical gap={12}>
      <Text as="h3" fontSize={24} fontWeight="bold">
        Typography, your way.
      </Text>
      <Text color="color-blue-800">
        Theme and palette tokens work here too.
      </Text>
      <Text isItalic>Keep content semantic and readable.</Text>
    </Vertical>
  );
}

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.

Text
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.
`backgroundColor`	`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: `transparent` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| 1 \| 1 \| 1 \| 12 \| 4 \|
`toUpperCase`	`boolean`	`—`	See the type and source declaration for this property.
`bgColor`	`string`	`—`	Background color used to automatically compute a readable text color
`isItalic`	`boolean`	`—`	See the type and source declaration for this property.
`isStriked`	`boolean`	`—`	See the type and source declaration for this property.
`isUnderlined`	`boolean`	`—`	See the type and source declaration for this property.
`isSub`	`boolean`	`—`	See the type and source declaration for this property.
`isSup`	`boolean`	`—`	See the type and source declaration for this property.
`maxLines`	`number`	`—`	See the type and source declaration for this property.
`weight`	`string \| number`	`—`	Shorthand for fontWeight; accepts numeric (100-900) or named weights ("normal", "bold", "semibold", etc.). Convenience alias for the underlying fontWeight CSS property.
`variant`	`string`	`—`	Optional style variant identifier. Free-form string used by component wrappers and design systems to dispatch typography presets.
`size`	`string \| number`	`—`	Shorthand for fontSize; accepts numeric or named sizes (e.g. 'sm', 14, '14px').
`spacing`	`string \| number`	`—`	Shorthand for letterSpacing; accepts numeric or named tracking values.
`heading`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"` `"h1""h2""h3""h4""h5""h6"`	`—`	Renders a heading preset (h1–h6): sets the semantic element along with a matching font size, weight, and line height from the design-system scale.
`numberOfLines`	`number \| null`	`—`	See the type and source declaration for this property.
`selectable`	`boolean`	`—`	See the type and source declaration for this property.
`defaultChecked`	`boolean`	`—`	See the type and source declaration for this property.
`defaultValue`	`string \| number \| readonly string[]`	`—`	Initial value for uncontrolled usage.
`autoFocus`	`boolean`	`—`	See the type and source declaration for this property.
`className`	`string`	`—`	See the type and source declaration for this property.
`style`	`react.CSSProperties`	`—`	See the type and source declaration for this property.
`rel`	`string`	`—`	See the type and source declaration for this property.
`onClick`	`any`	`—`	Called when the user activates the component.
`accessibilityLabel`	`string \| null`	`—`	See the type and source declaration for this property.
`accessibilityLiveRegion`	`"none" \| "polite" \| "assertive"` `"none""polite""assertive"`	`—`	See the type and source declaration for this property.
`accessibilityRole`	`string \| null`	`—`	See the type and source declaration for this property.
`accessibilityState`	View type `{ busy?: boolean \| null \| undefined; checked?: (boolean \| null \| undefined) \| "mixed"; disabled?: boolean \| null \| undefined; expanded?: boolean \| null \| undefined; grabbed?: boolean \| null \| undefined; hidden?: boolean \| null \| undefined; invalid?: boolean \| null \| undefined; modal?: boolean \| null \| undefined; pressed?: boolean \| null \| undefined; readonly?: boolean \| null \| undefined; required?: boolean \| null \| undefined; selected?: boolean \| null \| undefined; }`	`—`	See the type and source declaration for this property.
`accessibilityValue`	`{ max?: number \| null \| undefined; min?: number \| null \| undefined; now?: number \| null \| undefined; text?: string \| null \| undefined; }`	`—`	See the type and source declaration for this property.
`accessible`	`boolean`	`—`	See the type and source declaration for this property.
`importantForAccessibility`	`"auto" \| "yes" \| "no" \| "no-hide-descendants"` `"auto""yes""no""no-hide-descendants"`	`—`	See the type and source declaration for this property.
`nativeID`	`string \| null`	`—`	See the type and source declaration for this property.
`onLayout`	`((e: LayoutEvent) => void)`	`—`	See the type and source declaration for this property.
`onMoveShouldSetResponder`	`((e: any) => boolean)`	`—`	See the type and source declaration for this property.
`onMoveShouldSetResponderCapture`	`((e: any) => boolean)`	`—`	See the type and source declaration for this property.
`onResponderEnd`	`((e: any) => void)`	`—`	See the type and source declaration for this property.
`onResponderGrant`	`((e: any) => void)`	`—`	See the type and source declaration for this property.
`onResponderMove`	`((e: any) => void)`	`—`	See the type and source declaration for this property.
`onResponderReject`	`((e: any) => void)`	`—`	See the type and source declaration for this property.
`onResponderRelease`	`((e: any) => void)`	`—`	See the type and source declaration for this property.
`onResponderStart`	`((e: any) => void)`	`—`	See the type and source declaration for this property.
`onResponderTerminate`	`((e: any) => void)`	`—`	See the type and source declaration for this property.
`onResponderTerminationRequest`	`((e: any) => boolean)`	`—`	See the type and source declaration for this property.
`onScrollShouldSetResponder`	`((e: any) => boolean)`	`—`	See the type and source declaration for this property.
`onScrollShouldSetResponderCapture`	`((e: any) => boolean)`	`—`	See the type and source declaration for this property.
`onSelectionChangeShouldSetResponder`	`((e: any) => boolean)`	`—`	See the type and source declaration for this property.
`onSelectionChangeShouldSetResponderCapture`	`((e: any) => boolean)`	`—`	See the type and source declaration for this property.
`onStartShouldSetResponder`	`((e: any) => boolean)`	`—`	See the type and source declaration for this property.
`onStartShouldSetResponderCapture`	`((e: any) => boolean)`	`—`	See the type and source declaration for this property.
`testID`	`string \| null`	`—`	See the type and source declaration for this property.
`dataSet`	`Object \| null`	`—`	See the type and source declaration for this property.
`href`	`string`	`—`	See the type and source declaration for this property.
`target`	`string`	`—`	See the type and source declaration for this property.
`src`	`string`	`—`	Source URL of the media.
`alt`	`string`	`—`	See the type and source declaration for this property.
`controls`	`boolean`	`—`	See the type and source declaration for this property.
`muted`	`boolean`	`—`	See the type and source declaration for this property.
`autoPlay`	`boolean`	`—`	See the type and source declaration for this property.
`loop`	`boolean`	`—`	See the type and source declaration for this property.
`poster`	`string`	`—`	See the type and source declaration for this property.
`playsInline`	`boolean`	`—`	See the type and source declaration for this property.
`preload`	`"" \| "metadata" \| "auto" \| "none"` `"""metadata""auto""none"`	`—`	See the type and source declaration for this property.
`crossOrigin`	`"" \| "anonymous" \| "use-credentials"` `"""anonymous""use-credentials"`	`—`	See the type and source declaration for this property.
`srcSet`	`string`	`—`	See the type and source declaration for this property.
`sizes`	`string`	`—`	See the type and source declaration for this property.
`loading`	`"eager" \| "lazy"` `"eager""lazy"`	`—`	See the type and source declaration for this property.
`referrerPolicy`	`react.HTMLAttributeReferrerPolicy` `"""no-referrer""no-referrer-when-downgrade""origin""origin-when-cross-origin""same-origin""strict-origin""strict-origin-when-cross-origin""unsafe-url"`	`—`	See the type and source declaration for this property.
`decoding`	`"auto" \| "async" \| "sync"` `"auto""async""sync"`	`—`	See the type and source declaration for this property.
`name`	`string`	`—`	Field name used by forms and Formik bindings.
`value`	`string \| number \| readonly string[]`	`—`	Current controlled value. Update it from the matching change callback.
`multiple`	`boolean`	`—`	See the type and source declaration for this property.
`disabled`	`boolean`	`—`	Disables user interaction.
`readOnly`	`boolean`	`—`	See the type and source declaration for this property.
`required`	`boolean`	`—`	See the type and source declaration for this property.
`autoComplete`	`string`	`—`	See the type and source declaration for this property.
`placeholder`	`string`	`—`	Hint displayed while the field is empty.
`pattern`	`string`	`—`	See the type and source declaration for this property.
`min`	`string \| number`	`—`	Minimum allowed value.
`max`	`string \| number`	`—`	Maximum allowed value.
`minLength`	`number`	`—`	Minimum permitted input length.
`maxLength`	`number`	`—`	Maximum permitted input length.
`step`	`string \| number`	`—`	Increment between allowed values.
`form`	`string`	`—`	See the type and source declaration for this property.
`formAction`	`string`	`—`	See the type and source declaration for this property.
`formEncType`	`string`	`—`	See the type and source declaration for this property.
`formMethod`	`"dialog" \| "get" \| "post"` `"dialog""get""post"`	`—`	See the type and source declaration for this property.
`formNoValidate`	`boolean`	`—`	See the type and source declaration for this property.
`formTarget`	`string`	`—`	See the type and source declaration for this property.
`rows`	`number`	`—`	See the type and source declaration for this property.
`cols`	`number`	`—`	See the type and source declaration for this property.
`wrap`	`string`	`—`	HTML textarea wrap attribute. Browsers accept 'hard' \| 'soft' \| 'off' but the DOM type widens to plain `string`, so we mirror that here.
`list`	`string`	`—`	See the type and source declaration for this property.
`accept`	`string`	`—`	See the type and source declaration for this property.
`capture`	`boolean \| "user" \| "environment"`	`—`	See the type and source declaration for this property.
`colSpan`	`number`	`—`	See the type and source declaration for this property.
`rowSpan`	`number`	`—`	See the type and source declaration for this property.
`headers`	`string`	`—`	See the type and source declaration for this property.
`scope`	`string`	`—`	See the type and source declaration for this property.
`hrefLang`	`string`	`—`	See the type and source declaration for this property.
`download`	`string \| boolean`	`—`	See the type and source declaration for this property.
`xmlns`	`string`	`—`	See the type and source declaration for this property.
`viewBox`	`string`	`—`	See the type and source declaration for this property.
`preserveAspectRatio`	`string`	`—`	See the type and source declaration for this property.
`open`	`boolean`	`—`	See the type and source declaration for this property.
`scoped`	`boolean`	`—`	See the type and source declaration for this property.
`reversed`	`boolean`	`—`	See the type and source declaration for this property.
`start`	`number`	`—`	See the type and source declaration for this property.
`htmlFor`	`string`	`—`	See the type and source declaration for this property.
`on`	`Record<string, CssProps>`	`—`	See the type and source declaration for this property.
`media`	`Record<string, CssProps>`	`—`	See the type and source declaration for this property.
`only`	`string[]`	`—`	See the type and source declaration for this property.
`css`	`any`	`—`	See the type and source declaration for this property.
`onPress`	`any`	`—`	See the type and source declaration for this property.
`blend`	`boolean`	`—`	See the type and source declaration for this property.
`type`	`string`	`—`	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.
`widthHeight`	`string \| number`	`—`	See the type and source declaration for this property.
`srcDoc`	`string`	`—`	See the type and source declaration for this property.
`sandbox`	`string`	`—`	See the type and source declaration for this property.
`to`	`string`	`—`	Destination URL or application route.
`keys`	`any[]`	`—`	See the type and source declaration for this property.
`sx`	`any`	`—`	See the type and source declaration for this property.
`itemStyle`	`any`	`—`	See the type and source declaration for this property.
`paddingX`	`string \| number`	`—`	See the type and source declaration for this property.
`paddingY`	`string \| number`	`—`	See the type and source declaration for this property.
`marginX`	`string \| number`	`—`	See the type and source declaration for this property.
`marginY`	`string \| number`	`—`	See the type and source declaration for this property.
`hoverBackgroundColor`	`string`	`—`	See the type and source declaration for this property.
`hover`	`boolean \| Record<string, any>`	`—`	See the type and source declaration for this property.
`hoverStyle`	`Record<string, any>`	`—`	See the type and source declaration for this property.
`checked`	`boolean`	`—`	See the type and source declaration for this property.
`transition`	`string`	`—`	This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015. Syntax: `<single-transition>#` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :-----: \| :-----: \| :-------: \| :----: \| :----: \| \| 26 \| 16 \| 9 \| 12 \| 10 \| \| 1 _-x-_ \| \| 3.1 _-x-_ \| \| \|
`before`	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.
`after`	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.
`theme`	`Partial<Theme>`	`—`	Component-scoped theme override. Remaps `theme-*` tokens used by this component (and its style props) to different color tokens, without affecting the global ThemeProvider. Each value is a color token string (`color-red-500`, `theme-secondary`) or a raw color (`#ff0000`).
`themeMode`	`"light" \| "dark"` `"light""dark"`	`—`	See the type and source declaration for this property.
`animateOn`	`"View" \| "Mount" \| "Both" \| "Scroll"` `"View""Mount""Both""Scroll"`	`—`	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.
`_visited`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_disabled`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_enabled`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_checked`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_unchecked`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_invalid`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_valid`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_required`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_optional`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_selected`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_target`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_firstChild`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_lastChild`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_onlyChild`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_firstOfType`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_lastOfType`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_empty`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_focusVisible`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_focusWithin`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_placeholder`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_odd`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_even`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_groupHover`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_groupFocus`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_groupActive`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_groupDisabled`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_peerHover`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_peerFocus`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_peerActive`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_peerDisabled`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_peerChecked`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_before`	`CssProps`	`—`	See the type and source declaration for this property.
`_after`	`CssProps`	`—`	See the type and source declaration for this property.
`_firstLetter`	`CssProps`	`—`	See the type and source declaration for this property.
`_firstLine`	`CssProps`	`—`	See the type and source declaration for this property.
`_selection`	`CssProps`	`—`	See the type and source declaration for this property.
`_backdrop`	`CssProps`	`—`	See the type and source declaration for this property.
`_marker`	`CssProps`	`—`	See the type and source declaration for this property.
`_webkitAutofill`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_webkitContactsAutoFillButton`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_webkitInnerSpinButton`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_webkitOuterSpinButton`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_webkitSearchCancelButton`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_mozPlaceholder`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_mozFocusInner`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`paddingHorizontal`	`string \| number`	`—`	See the type and source declaration for this property.
`marginHorizontal`	`string \| number`	`—`	See the type and source declaration for this property.
`paddingVertical`	`string \| number`	`—`	See the type and source declaration for this property.
`marginVertical`	`string \| number`	`—`	See the type and source declaration for this property.
`animate`	`AnimationProps \| AnimationProps[]`	`—`	See the type and source declaration for this property.
`animateIn`	`AnimationProps \| AnimationProps[]`	`—`	See the type and source declaration for this property.
`animateOut`	`AnimationProps \| AnimationProps[]`	`—`	See the type and source declaration for this property.
`shadow`	`number \| boolean \| Shadow`	`—`	Shadow or elevation styling.
`WebkitUserDrag`	`import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all""text""auto""none""-moz-initial""inherit""initial""revert""revert-layer""unset""-moz-none"`	`—`	See the type and source declaration for this property.
`webkitUserDrag`	`import("/Volumes/workspace/open-source/app-studio-components/node_modules/csstype/index").Property.UserSelect` `"all""text""auto""none""-moz-initial""inherit""initial""revert""revert-layer""unset""-moz-none"`	`—`	See the type and source declaration for this property.
`safeArea`	`boolean \| "all" \| SafeAreaEdge \| SafeAreaEdge[]`	`—`	`true`/`'all'` = all four edges; or a single edge / array of edges.
`safeAreaTop`	`boolean`	`—`	Per-edge opt-in. An explicit boolean wins over `safeArea`/`safeAreaEdges`.
`safeAreaBottom`	`boolean`	`—`	See the type and source declaration for this property.
`safeAreaLeft`	`boolean`	`—`	See the type and source declaration for this property.
`safeAreaRight`	`boolean`	`—`	See the type and source declaration for this property.
`safeAreaEdges`	`SafeAreaEdge[]`	`—`	Explicit edge list, merged with `safeArea`.
`ignoreSafeArea`	`boolean`	`—`	Force safe area OFF — wins over every other safe-area prop.
`safeAreaMode`	`SafeAreaMode` `"margin""padding"`	`—`	Apply the inset as padding (default) or margin.

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.