Using this Component
UIButton should be used for most actions. Different styles & types can be chosen depending on the desired level of emphasis, and surrounding context.
For a highly emphasized action within a page or section. Only one primary button should appear per button group. Avoid using more than one per page where possible.
Used for subordinate actions (e.g. “Cancel”). There can be multiple secondary buttons in a section or button group, unlike primary buttons.
Used for tertiary actions, where the text should always be visible, but where the outline of a primary or secondary button would be too visually prominent. For actions not significant enough to warrant a ghost button, consider using UITextButton.
Leaving the type empty will render buttons in the default (and most common) appearance.
For actions used to present highly positive actions such as successes, or uplifting confirmations. Styled with color al-win. Avoid using in a button group with buttons of type caution or info.
For actions used to convey a warning or error. Styled with color al-warn. Ideal for usage in UIAlertBox of type warning. Avoid using in a button group with buttons of type success or info.
For actions used when presenting neutral information (i.e. not successes or warnings). Styled with color al-info. Ideal for usage in UIAlertBox of type info. Avoid using in a button group with buttons of type success or caution.
Multiple UIButtons can be used together to create groups of related actions. The number of buttons in group should be the smallest possible number that accomplishes the desired functionality. Too many UIButtons visible at once can become distracting or overwhelming.
1. Text Label
Buttons are labeled with a single line of centered aligned text.
Button text is centered within a rounded rectangle container. The width of the button is determined by the length of the text label, with a minimum size of 72px.
A button should always visually convey its current interactive states: enabled, disabled, hover, focused, pressed. Disabled actions should never disappear entirely from view.
To help with predictability, avoid changing button labels, placement, or size based upon interactions. To convey more complex states or action flows, use buttons in concert with other components.
A button should be sized to fit the text of its label, not the other way around. Button labels should never be truncated.
Component code details are not currently available on this site, but we're working on it!
Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.