Buttons

These are the buttons found in our UI:

  • An action button, created with a button element.
  • An image button, created with a span that wraps an input element of type image.
  • A disabled button, which is gray text on a gray background.
  • A form button, created with an input tag.

Action buttons

Buttons that generally perform global actions

Image Buttons

Form buttons

Form buttons are spaced out a little further from each other.

Dojo Dijit buttons

These are Dojo Dijit buttons. It is not recommended that you use Dojo buttons because they do not offer a significant development advantage over the button examples above. They also come with a high performance cost in the form of significantly more DOM elements that bloat your HTML stream, additional JavaScript code that bloats your JavaScript library, and they take more time for the browser to process.

Classes

  • lotusBtn - the basic button class
  • lotusBtnSpecial - additional class for special, stand-out buttons (we currently don't have any of these in our UI, all buttons are the same neutral color)
  • lotusBtnDisabled - additional class for disabled buttons
  • lotusBtnImg - this class goes on the wrapper for an image button. (In this case the lotusBtn class is not needed.)
  • lotusBtnContainer - the class for a div surrounding a row of buttons. Don't use this if you are already wrapping buttons in an action bar.
  • lotusBtnDivider - this class is an additional class for a button container when you need a bottom divider for the buttons
  • lotusBtnAction - DEPRECATED an additional class along with lotusBtn for action buttons
  • lotusButton - DEPRECATED the class for a fixed-width button in the left or right column
  • lotusFormButton - DEPRECATED the class for buttons that appear in forms

Basic Implementation

Non-form buttons are created using a button element.

Form buttons are created using an input element.

Variations

Buttons at the top of a table are contained in a div with a lotusActionBar class.

The basic class that goes on all buttons (with the exception of image-only buttons) is the lotusBtn class, which sets up defaults and creates a gray button. The lotusBtnDisabled class is an additional class supplied to create a disabled button.

An image button is made out of a span element that contains the background gradient and an input type=image element that is set to blank.gif and assigned a background graphic that is the icon itself.

Accessibility

Buttons that trigger a menu should have the attribute aria-haspopup set to true and the aria-owns attribute with its value set to the popup menu's id.

When adding an image to a text button, follow the alternate text techniques. Note: the drop-down arrow images are accounted for in the button css and are hidden when images are turned off, but no other images are.

Examples

Sample HTML - Action Buttons

Sample HTML - Image Buttons

Sample HTML - Form Buttons

Sample HTML - Dojo Buttons

CSS (buttons.css)

Theme CSS (buttonsTheme.css)

Buttons were originally created using links wrapped by spans to give us additional styling options and to overcome IE 6 & 7's odd behavior of expanding the left and right padding on the button depending on the length of the text on the button.

We originally had 3 types of buttons, all different colors. A regular button, an action button, and a special button. The styles for the special buttons are still in the CSS, but they currently are styled like our default buttons.

Our form button styles used to be styled like special buttons. They had their own class. Now they are using the lotusBtn class and scoped by form styles.

April 2009 - updated the green action buttons to our regular silver button style and made the text on silver buttons be black. Updated the disabled button to use our same silver background with gray text.

May 2009 - added the ability to theme our image buttons (search, close, add).

November 2010 - deprecated link buttons (also link image buttons) and the lotusFormButton style.

January 2011 - updated accessibility information, including removing aria-label from images and using the alt attribute because button images are hidden when images are turned off.

March 20, 2012 - fixed disable button styles that got removed, and some high contrast and deprecated style issues.

See also: