Hint

A hint is an in-app message that shares reminders, explanations, or calls to action within a page or modal.

Examples

Basic with title

Do more with Find it Fix it capabilities

Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.

Basic without title

Welcome to the new documentation experience.

Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.

With actions

You can add actions to a hint to allow users to respond to suggestions and initiate any related processes.

When a <Hint> contains actions, a negative margin is applied to the actions so that they are better aligned with the hint title. For larger-sized titles or non-plain actions (such as a button), remove this negative margin by setting hasNoActionsOffset to true.

To illustrate this behavior, select the "actions hasNoActionsOffset" checkbox in the following example.

actions hasNoOffset

Do more with Find it Fix it capabilities

Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.

Props

Hint

*required
Name	Type	Default	Description
actions	React.ReactNode		Actions of the hint.
children	React.ReactNode		Content rendered inside the hint.
className	string		Additional classes applied to the hint.
hasNoActionsOffset	boolean	false	Flag indicating that the actions have no offset

HintTitle

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the hint title.
className	string		Additional classes applied to the hint title.

HintBody

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the hint body.
className	string		Additional classes applied to the hint body.

HintFooter

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the hint footer.
className	string		Additional classes applied to the hint footer.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-hint	--pf-v6-c-hint--GridRowGap	0.5rem
--pf-v6-c-hint--GridRowGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-hint	--pf-v6-c-hint--PaddingBlockStart	1.5rem
--pf-v6-c-hint--PaddingBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-hint	--pf-v6-c-hint--PaddingInlineEnd	1.5rem
--pf-v6-c-hint--PaddingInlineEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-hint	--pf-v6-c-hint--PaddingBlockEnd	1.5rem
--pf-v6-c-hint--PaddingBlockEnd --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-hint	--pf-v6-c-hint--PaddingInlineStart	1.5rem
--pf-v6-c-hint--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-hint	--pf-v6-c-hint--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-hint--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-hint	--pf-v6-c-hint--BorderColor	(In light theme) #5e40be
--pf-v6-c-hint--BorderColor --pf-t--global--border--color--status--info--default --pf-t--global--color--status--info--default --pf-t--global--color--status--info--100 --pf-t--color--purple--50 #5e40be
	.pf-v6-c-hint	--pf-v6-c-hint--BorderWidth	2px
--pf-v6-c-hint--BorderWidth --pf-t--global--border--width--box--status--default --pf-t--global--border--width--200 2px
	.pf-v6-c-hint	--pf-v6-c-hint--BorderRadius	16px
--pf-v6-c-hint--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-hint	--pf-v6-c-hint--Color	(In light theme) #151515
--pf-v6-c-hint--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-hint	--pf-v6-c-hint__title--FontWeight	500
--pf-v6-c-hint__title--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	.pf-v6-c-hint	--pf-v6-c-hint__body--FontSize	0.875rem
--pf-v6-c-hint__body--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-hint	--pf-v6-c-hint__footer--MarginBlockStart	0.5rem
--pf-v6-c-hint__footer--MarginBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-hint	--pf-v6-c-hint__footer--child--MarginInlineEnd	1rem
--pf-v6-c-hint__footer--child--MarginInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-hint	--pf-v6-c-hint__actions--MarginInlineStart	3rem
--pf-v6-c-hint__actions--MarginInlineStart --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	.pf-v6-c-hint	--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart	calc(0.5rem * -1)
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart calc(--pf-t--global--spacer--control--vertical--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-hint	--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd	calc(0.5rem * -1)
--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd calc(--pf-t--global--spacer--control--vertical--default * -1) calc(--pf-t--global--spacer--sm * -1) calc(--pf-t--global--spacer--200 * -1) calc(0.5rem * -1)
	.pf-v6-c-hint__actions.pf-m-no-offset	--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart	0
	.pf-v6-c-hint__actions.pf-m-no-offset	--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd	0

View source on GitHub