Ui.FloatingButton

A circual button to indicate the primary action on a page.

Interactive Demo

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

Type
Primary
Size (60px)
Icon
Plus
<Ui.FloatingButton
size={Ui.Size.Px(60)}
icon={Ui.Icons:PLUS}
type="primary"/>
Icon

The icon can be controlled with the icon property.

<>
<Ui.FloatingButton icon={Ui.Icons.PLUS}/>
<Ui.FloatingButton icon={Ui.Icons.SETTINGS}/>
<Ui.FloatingButton icon={Ui.Icons.CALENDAR}/>
</>
Types

The same types can be used as for a Ui.Button.

<>
<Ui.FloatingButton icon={Ui.Icons.PLUS} type="primary"/>
<Ui.FloatingButton icon={Ui.Icons.PLUS} type="secondary"/>
<Ui.FloatingButton icon={Ui.Icons.PLUS} type="warning"/>
<Ui.FloatingButton icon={Ui.Icons.PLUS} type="success"/>
<Ui.FloatingButton icon={Ui.Icons.PLUS} type="danger"/>
<Ui.FloatingButton icon={Ui.Icons.PLUS} type="faded"/>
</>
Size

The size can be controlled with the size property.

<>
<Ui.FloatingButton size={Ui.Size.Px(40)} icon={Ui.Icons.PLUS}/>
<Ui.FloatingButton size={Ui.Size.Px(60)} icon={Ui.Icons.PLUS}/>
<Ui.FloatingButton size={Ui.Size.Px(80)} icon={Ui.Icons.PLUS}/>
</>
Click

The click event can be handled using the onClick property.

<Ui.FloatingButton
onClick={
(event : Html.Event) { Ui.Notifications.notifyDefault(<>"Play!"</>) }
}
icon={Ui.Icons.PLAY}
/>
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.