Ui.Box

A component to group together things and actions that are related to that content.

Interactive Demo

You can play around with a Ui.Box below using the controls.

Label
Title
Content
Title
Label
Content
Size (16px)
<Ui.Box
size={Ui.Size.Px(16)}
title=<{ "Title" }>
label=<{ "Label" }>>
"Content"
</Ui.Box>
Size

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

Label
Title
Content
Label
Title
Content
Label
Title
Content
<>
<Ui.Box size={Ui.Size.Px(12)} title=<>"Title"</> label=<>"Label"</>>"Content"</Ui.Box>
<Ui.Box size={Ui.Size.Px(16)} title=<>"Title"</> label=<>"Label"</>>"Content"</Ui.Box>
<Ui.Box size={Ui.Size.Px(20)} title=<>"Title"</> label=<>"Label"</>>"Content"</Ui.Box>
</>
Title

The title of the box can be set with the title property.

Title
Content
Title with an icon!
Content
<>
<Ui.Box title=<>"Title"</>>"Content"</Ui.Box>
<Ui.Box
title={
<Ui.Container>
<Ui.Icon icon={Ui.Icons.BUG}/>
"Title with an icon!"
</Ui.Container>
}
>"Content"</Ui.Box>
</>
Label

The label of the box can be set with the label property.

Label
Content
Label with an icon!
Content
<>
<Ui.Box label=<>"Label"</>>"Content"</Ui.Box>
<Ui.Box
label={
<Ui.Container>
<Ui.Icon icon={Ui.Icons.BUG}/>
"Label with an icon!"
</Ui.Container>
}
>"Content"</Ui.Box>
</>
Content

The children rendered as the content of the box.

Lorem ipsum dolor sit amet, consectetur...
<>
<Ui.Box>"Lorem ipsum dolor sit amet, consectetur..."</Ui.Box>
<Ui.Box><Ui.Button label="A button..."/></Ui.Box>
</>
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.