Heading

Provide structure separating content sections.

RELATED CONTENT


Overview

Maturity

RC

FYQ2 target

Beta

Repository

Storybook

How To Migrate

color

The color prop now takes our semantic colors and we have a specific set just for Heading.

Try to migrate uses of raw colors over to the semantic colors, if you find a situation where you aren’t able to let us know.


                                                        
                                                        
                                                            // Before
                                                        <Heading color="#000">
                                                          {translate('snippets.testerUI.missionEnd.description')}
                                                        </Heading>
                                                        
                                                            

                                                        
                                                        
                                                            // After
                                                        <Heading color='default.main.primary'>
                                                          {translate('snippets.testerUI.missionEnd.description')}
                                                        </Heading>
                                                        
                                                            

RELATED CONTENT

fontFamily

The prop fontFamily has been removed. It can be completely removed as Heading already set’s the font family and we have moved away from multiple font families.

marginmymxmtmrmbml, etc.

Margin related props have been removed. Either migrate to wrapping with a Flex or Box with the related margin props or move to using a Flex with gap.

textAlign

The prop textAlign has been renamed to align to match the change with Text.


                                                        
                                                        
                                                            // Before
                                                        <Heading textAlign="center">Unexpected error</Heading>
                                                        
                                                            

                                                        
                                                        
                                                            // After
                                                        <Heading align="center">Unexpected error</Heading>
                                                        
                                                            

position

The prop position has been removed. Wrap the Heading in a Flex or Box with the related position component.

variant

The prop variant has been removed, use level instead.


                                                        
                                                        
                                                            // Before
                                                        <Heading variant="heading4">
                                                          {title}
                                                        </Heading>
                                                        
                                                            

                                                        
                                                        
                                                            // After
                                                        <Heading level={4}>
                                                        	{title}
                                                        </Heading>
                                                        
                                                            

Examples

Let Us Know

For cases where you are not easily able to migrate HeadingDeprecated to Heading or

Heading is missing a property you need, let us know in #design-system.