Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
A button contains a label and optional icons before or after it.
<Ui.Button iconBefore={Ui.Icons:DESKTOP_DOWNLOAD} size={Ui.Size.Px(16)} breakWords={false} disabled={false} ellipsis={true} label="Download" type="primary"/>
There are some pre defined types, each serving its own semantic purpose:
primary
- indicates the primary action (should be only one per page)secondary
- indicates an action, this is the most common typewarning
- indicates that the following action can be dangeroussuccess
- indicates that an action before has successfully completeddanger
- indicates that the following action is irreversible, a confirmation should precede the actionfaded
- indicates an action which does not attract attention<> <Ui.Button label="Primary" type="primary"/> <Ui.Button label="Secondary" type="secondary"/> <Ui.Button label="Warning" type="warning"/> <Ui.Button label="Success" type="success"/> <Ui.Button label="Danger" type="danger"/> <Ui.Button label="Faded" type="faded"/></>
An icon can be specified to appear before and/or after the label.
<Ui.Button iconBefore={Ui.Icons.DESKTOP_DOWNLOAD} iconAfter={Ui.Icons.DESKTOP_DOWNLOAD} label="Download"/>
<Ui.Button iconBefore={Ui.Icons.ALERT} label="Click!" type="warning" onMouseDown={ (event : Html.Event) { Ui.Notifications.notifyDefault(<>"MouseDown!"</>) } } onMouseUp={ (event : Html.Event) { Ui.Notifications.notifyDefault(<>"MouseUp!"</>) } } onClick={ (event : Html.Event) { Ui.Notifications.notifyDefault(<>"Click!"</>) } }/>
Mint UI is a design system and component library for building websites, web and desktop applications.