Layer Styles
Apply named surface treatments from the Saas UI preset.
Use the layerStyle prop to apply a named treatment. Palette styles follow
colorPalette. Surface styles use semantic tokens.
<Box layerStyle="fill.subtle" colorPalette="destructive">Warning</Box>
<Box layerStyle="overlay">Dialog panel</Box>The full list — fill, outline, indicator, overlay, backdrop, disabled, and none — is on Layer styles.
layerStyle: fill
fill.muted
fill.subtle
fill.surface
fill.solid
layerStyle: outline
outline.subtle
outline.solid
layerStyle: indicator
indicator.top
indicator.bottom
indicator.start
indicator.end
layerStyle: surface
overlay
backdrop
layerStyle: state
disabled
none
To add your own, merge onto defaultConfig:
import { createSystem, defineConfig, defineLayerStyles } from '@chakra-ui/react'
import { defaultConfig } from '@saas-ui/chakra-preset'
const layerStyles = defineLayerStyles({
hero: {
value: {
bg: 'bg.inverted',
color: 'fg.inverted',
},
},
})
export const system = createSystem(
defaultConfig,
defineConfig({ theme: { layerStyles } }),
)