Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Component Composition
Component Body
Component Facets
Best Practices for Conditional Markup
Component Versioning
Using Expressions
Using Labels
Localization
Providing Component Documentation
Working with UI Components
UI Events
Using the UI Components
Date and Time Fields
Number Fields
Text Fields
Rich Text Fields
Checkboxes
Radio Buttons
Buttons
Drop-down Lists
Field-level Errors
Menus
Supporting Accessibility
Using Components
Communicating with Events
Creating Apps
Debugging
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Buttons

A button is clickable and actionable, providing a textual label, an image, or both. You can create a button in three different ways:

  • Text-only Button
  • Image-only Button

    The assistiveText class hides the label from view but makes it available to assistive technologies.

  • Button with Text and Image

HTML Rendering

The markup for a button with text and image results in the following HTML.

Working with Click Events

The press event on the ui:button component is fired when the user clicks the button. In the following example, press="{!c.getInput}" calls the client-side controller action with the function name, getInput, which outputs the input text value.

Styling Your Buttons

The ui:button component is customizable with regular CSS styling. In the CSS resource of your component, add the following class selector.

Note that no space is added in the .THIS.uiButton selector if your button component is a top-level element.

To override the styling for all ui:button components in your app, in the CSS resource of your app, add the following class selector.