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

// 1. Import `extendTheme`
import { extendTheme } from "@chakra-ui/react"
// 2. Extend the theme with new layer styles
const theme = extendTheme({
  layerStyles: {
    base: {
      bg: "gray.50",
      border: "2px solid",
      borderColor: "gray.500",
    },
    selected: {
      bg: "teal.500",
      color: "teal.700",
      borderColor: "orange.500",
    },
  },
})
// 3. Consume the text styles in your components
function Example() {
  return <Box layerStyle="selected">This is a box</Box>
}
// 4. You can also switch layer styles
function Example({ isSelected }) {
  const layerStyle = isSelected ? "selected" : "base"
  return <Box layerStyle={layerStyle}>This is a box</Box>
}

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)

// 1. Import `extendTheme`
import { extendTheme } from "@chakra-ui/react"
// 2. Define the new text styles
const theme = extendTheme({
  textStyles: {
    h1: {
      // you can also use responsive styles
      fontSize: ["48px", "72px"],
      fontWeight: "bold",
      lineHeight: "110%",
      letterSpacing: "-2%",
    },
    h2: {
      fontSize: ["36px", "48px"],
      fontWeight: "semibold",
      lineHeight: "110%",
      letterSpacing: "-1%",
    },
  },
})
// 3. Consume the text styles in your component
function Example() {
  return <Box textStyle="h1">This is a box</Box>
}

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)