Ui.ContentHint

Provides a visible hint in content (like documentation).

Interactive Demo

You can play around with a ContentHint.Hint below using the controls.

This is a hint!
Type
Danger
Icon
Alert
Content
Size (16px)
<Ui.ContentHint
size={Ui.Size.Px(16)}
icon={Ui.Icons:ALERT}
type="danger">
"This is a hint!"
</Ui.ContentHint>
Content

The content of the component are its children:

Hey! I'm the content now!
<Ui.ContentHint icon={Ui.Icons.ALERT} type="warning">"Hey! I'm the content now!"</Ui.ContentHint>
Types

The component supports the same types as the Ui.Button component:

Primary
Danger
Warning
Success
Secondary
Faded
<>
<Ui.ContentHint icon={Ui.Icons.CODE} type="primary">"Primary"</Ui.ContentHint>
<Ui.ContentHint icon={Ui.Icons.ALERT} type="danger">"Danger"</Ui.ContentHint>
<Ui.ContentHint icon={Ui.Icons.ALERT} type="warning">"Warning"</Ui.ContentHint>
<Ui.ContentHint icon={Ui.Icons.CHECK} type="success">"Success"</Ui.ContentHint>
<Ui.ContentHint icon={Ui.Icons.X} type="secondary">"Secondary"</Ui.ContentHint>
<Ui.ContentHint icon={Ui.Icons.NOTE} type="faded">"Faded"</Ui.ContentHint>
</>
Size

The size of the component can be set with the size property.

12px
16px
20px
<>
<Ui.ContentHint size={Ui.Size.Px(12)} icon={Ui.Icons.CODE} type="primary">
"12px"
</Ui.ContentHint>
<Ui.ContentHint size={Ui.Size.Px(16)} icon={Ui.Icons.CODE} type="primary">
"16px"
</Ui.ContentHint>
<Ui.ContentHint size={Ui.Size.Px(20)} icon={Ui.Icons.CODE} type="primary">
"20px"
</Ui.ContentHint>
</>
Icon

The icon which is displayed on the left can be controlled with the icon property:

Code
Alert
Bell
<>
<Ui.ContentHint icon={Ui.Icons.CODE} type="primary">"Code"</Ui.ContentHint>
<Ui.ContentHint icon={Ui.Icons.ALERT} type="primary">"Alert"</Ui.ContentHint>
<Ui.ContentHint icon={Ui.Icons.BELL} type="primary">"Bell"</Ui.ContentHint>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.