> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`. --- components: - rx.heading --- ```python exec import reflex as rx ``` # Heading ```python demo rx.heading("The quick brown fox jumps over the lazy dog.") ``` ## As another element Use the `as_` prop to change the heading level. This prop is purely semantic and does not change the visual appearance. ```python demo rx.flex( rx.heading("Level 1", as_="h1"), rx.heading("Level 2", as_="h2"), rx.heading("Level 3", as_="h3"), direction="column", spacing="3", ) ``` ## Size Use the `size` prop to control the size of the heading. The prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease ```python demo rx.flex( rx.heading("The quick brown fox jumps over the lazy dog.", size="1"), rx.heading("The quick brown fox jumps over the lazy dog.", size="2"), rx.heading("The quick brown fox jumps over the lazy dog.", size="3"), rx.heading("The quick brown fox jumps over the lazy dog.", size="4"), rx.heading("The quick brown fox jumps over the lazy dog.", size="5"), rx.heading("The quick brown fox jumps over the lazy dog.", size="6"), rx.heading("The quick brown fox jumps over the lazy dog.", size="7"), rx.heading("The quick brown fox jumps over the lazy dog.", size="8"), rx.heading("The quick brown fox jumps over the lazy dog.", size="9"), direction="column", spacing="3", ) ``` ## Weight Use the `weight` prop to set the text weight. ```python demo rx.flex( rx.heading("The quick brown fox jumps over the lazy dog.", weight="light"), rx.heading("The quick brown fox jumps over the lazy dog.", weight="regular"), rx.heading("The quick brown fox jumps over the lazy dog.", weight="medium"), rx.heading("The quick brown fox jumps over the lazy dog.", weight="bold"), direction="column", spacing="3", ) ``` ## Align Use the `align` prop to set text alignment. ```python demo rx.flex( rx.heading("Left-aligned", align="left"), rx.heading("Center-aligned", align="center"), rx.heading("Right-aligned", align="right"), direction="column", spacing="3", width="100%", ) ``` ## Trim Use the `trim` prop to trim the leading space at the start, end, or both sides of the text. ```python demo rx.flex( rx.heading( "Without Trim", trim="normal", style={ "background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)", }, ), rx.heading( "With Trim", trim="both", style={ "background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)", }, ), direction="column", spacing="3", ) ``` Trimming the leading is useful when dialing in vertical spacing in cards or other “boxy” components. Otherwise, padding looks larger on top and bottom than on the sides. ```python demo rx.flex( rx.box( rx.heading( "Without trim", margin_bottom="4px", size="3", ), rx.text( "The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant." ), style={ "background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)", }, padding="16px", ), rx.box( rx.heading("With trim", margin_bottom="4px", size="3", trim="start"), rx.text( "The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant." ), style={ "background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)", }, padding="16px", ), direction="column", spacing="3", ) ``` ## Color Use the `color_scheme` prop to assign a specific color, ignoring the global theme. ```python demo rx.flex( rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="indigo"), rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="cyan"), rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="crimson"), rx.heading("The quick brown fox jumps over the lazy dog.", color_scheme="orange"), direction="column", ) ``` ## High Contrast Use the `high_contrast` prop to increase color contrast with the background. ```python demo rx.flex( rx.heading( "The quick brown fox jumps over the lazy dog.", color_scheme="indigo", high_contrast=True, ), rx.heading( "The quick brown fox jumps over the lazy dog.", color_scheme="cyan", high_contrast=True, ), rx.heading( "The quick brown fox jumps over the lazy dog.", color_scheme="crimson", high_contrast=True, ), rx.heading( "The quick brown fox jumps over the lazy dog.", color_scheme="orange", high_contrast=True, ), direction="column", ) ``` ## API Reference ### rx.heading A foundational text primitive based on the element. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. | | `auto_capitalize` | Literal["off", "none", "on", "sentences", "words", "characters"] | - | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. | | `content_editable` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. | | `context_menu` | str | - | Defines the ID of a element which will serve as the element's context menu. | | `dir` | str | - | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). | | `draggable` | bool | - | Defines whether the element can be dragged. | | `enter_key_hint` | Literal["enter", "done", "go", "next", "previous", "search", "send"] | - | Hints what media types the media element is able to play. | | `hidden` | bool | - | Defines whether the element is hidden. | | `input_mode` | Literal["none", "text", "tel", "url", "email", "numeric", "decimal", "search"] | - | Defines the type of the element. | | `item_prop` | str | - | Defines the name of the element for metadata purposes. | | `lang` | str | - | Defines the language used in the element. | | `role` | Literal["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"] | - | Defines the role of the element. | | `slot` | str | - | Assigns a slot in a shadow DOM shadow tree to an element. | | `spell_check` | bool | - | Defines whether the element may be checked for spelling errors. | | `tab_index` | int | - | Defines the position of the current element in the tabbing order. | | `title` | str | - | Defines a tooltip for the element. | | `as_child` | bool | - | Change the default rendered element for the one passed as a child, merging their props and behavior. | | `as_` | str | - | Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild). | | `size` | Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"], Breakpoints[str, Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]] | - | Text size: "1" - "9". | | `weight` | Literal["light", "regular", "medium", "bold"], Breakpoints[str, Literal["light", "regular", "medium", "bold"]] | - | Thickness of text: "light", "regular", "medium", "bold". | | `align` | Literal["left", "center", "right"], Breakpoints[str, Literal["left", "center", "right"]] | - | Alignment of text in element: "left", "center", "right". | | `trim` | Literal["normal", "start", "end", "both"], Breakpoints[str, Literal["normal", "start", "end", "both"]] | - | Removes the leading trim space: "normal", "start", "end", "both". | | `color_scheme` | Literal["tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "brown", "orange", "sky", "mint", "lime", "yellow", "amber", "gold", "bronze", "gray"] | - | Overrides the accent color inherited from the Theme. | | `high_contrast` | bool | - | Whether to render the text with higher contrast color. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/