Skip to Content
Sponsor

Text and Layer Styles

In most projects you might find yourself repeating specific text properties (font size, font weight, line height) or layer properties (bg, color, shadow). This can be painful as your project grows in size.

Using textStyle and layerStyle props can help you keep things organized and consistent.

Layer Style#

Layer Styles allow you to save a combination of styling attributes to re-use in other components. Once created, pass the layerStyle prop to any component and chakra will resolve the styles accordingly.

Properties defined in a layer style

  • Color or text color
  • Background color
  • Border width and border color
  • Box shadow
  • Opacity

Text Styles#

Typography forms the core of any product just as much as colors and components do. As a result, you'll need to establish styles for consistent, legible typography early in the process of creating your product or design system.

The text styles functionality in Chakra makes it easy to repeatably apply a collection of text properties (like line height and size) to any component.

You can put these styles in the theme under the textStyles key to make easy to re-use in the future.

Properties defined in a text style

  • Font family, weight, and size
  • Line height
  • Letter spacing
  • Text decoration (strikethrough and underline)
  • Text transform (uppercase, lowercase, and capitalization)

Naming text styles#

In practice, we recommend using the same text style names used by designers on your team. Here are common ideas on how to name text styles:

  • Sized-based naming system (xs, sm, md, lg, xl)
  • Semantic naming system that corresponds to respective html tags in production (caption, paragraph, h1, h2)
  • Descriptive or functional naming system that explains the styles' intended use (alert, modal-header, button-label)
Edit this page