Ui.Brand

A component to display an icon and name together as a brand.

Interactive Demo

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

Mint
Name
Icon
Mint Logo
Href
Size (16px)
<Ui.Brand
size={Ui.Size.Px(16)}
icon={Ui.Icons:MINT}
name="Mint"/>
Name

The name displayed can be set with the name property.

Mint
Mint Labs
Mint Shop
<>
<Ui.Brand icon={Ui.Icons.FLAME} name="Mint"/>
<Ui.Brand icon={Ui.Icons.BEAKER} name="Mint Labs"/>
<Ui.Brand icon={Ui.Icons.CART} name="Mint Shop"/>
</>
Icon

The icon displayed can be set with the icon property.

Mint
Mint Labs
Mint Shop
<>
<Ui.Brand icon={Ui.Icons.FLAME} name="Mint"/>
<Ui.Brand icon={Ui.Icons.BEAKER} name="Mint Labs"/>
<Ui.Brand icon={Ui.Icons.CART} name="Mint Shop"/>
</>
Href

The URL to link to can be set with the href property.

<>
<Ui.Brand icon={Ui.Icons.FLAME} name="Mint" href="/"/>
<Ui.Brand href="/examples/dashboard" icon={Ui.Icons.BEAKER} name="Mint Labs"/>
<Ui.Brand href="/examples/checkout" icon={Ui.Icons.CART} name="Mint Shop"/>
</>
Size

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

Mint
Mint
Mint
<>
<Ui.Brand size={Ui.Size.Px(12)} icon={Ui.Icons.FLAME} name="Mint"/>
<Ui.Brand size={Ui.Size.Px(16)} icon={Ui.Icons.FLAME} name="Mint"/>
<Ui.Brand size={Ui.Size.Px(20)} icon={Ui.Icons.FLAME} name="Mint"/>
</>
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.