Ui.Button

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

  • Dialogs
  • Modal windows
  • Forms
  • Cards
  • Toolbars

A button contains a label and optional icons before or after it.

Interactive Demo

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

Size (16px)
Type
Primary
Label
Href
Icon Before
Desktop Download
Icon After
Break Words
Ellipsis
Disabled
<Ui.Button
iconBefore={Ui.Icons:DESKTOP_DOWNLOAD}
size={Ui.Size.Px(16)}
breakWords={false}
disabled={false}
ellipsis={true}
label="Download"
type="primary"/>
Types

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 type
  • warning - indicates that the following action can be dangerous
  • success - indicates that an action before has successfully completed
  • danger - indicates that the following action is irreversible, a confirmation should precede the action
  • faded - 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"/>
</>
Size

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

<>
<Ui.Button size={Ui.Size.Px(12)} label="Size: 12px"/>
<Ui.Button size={Ui.Size.Px(16)} label="Size: 16px"/>
<Ui.Button size={Ui.Size.Px(20)} label="Size: 20px"/>
</>
Icons

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"
/>
Link

The component can be used as a link by providing a value for the href property.

<Ui.Button iconBefore={Ui.Icons.ARROW_LEFT} label="Back" href="/"/>
Disabled

The component can be disabled using the disabled property.

<Ui.Button
iconBefore={Ui.Icons.ALERT}
label="Self Destruct"
disabled={true}
type="danger"
/>
Events

The component can take three types of events.

  • onMouseDown - when the mouse is down.
  • onMouseUp - when the mouse is up.
  • onClick - a click (after the mouse up).
<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

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.