See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.
A member of the Bluemix Design System's team will be in touch within 48 hours.
Your issue, , is now in the bluemix-components repo. Click the issue number to track the progress or make edits to your issue.
We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:
#bluemix-componentselements
Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.
Primary buttons should be used for the principle call to action on the page. What is the most important action your user should take? Primary buttons should be three words or less.
<button class='bx--btn' type='button'>Primary button</button>
<a href='#' class='bx--btn' role='button'>Primary link</a>
Secondary buttons should be used for secondary actions on each page. Secondary buttons should be three words or less.
<button class='bx--btn--secondary' type='button'>Secondary button</button>
<a href='#' class='bx--btn--secondary' role='button'>Secondary link</a>
When words are not enough, icons can be used in buttons to better communicate what the button does. Icons are always paired with text.
<button class='bx--btn'>
Button
<svg class='bx--btn--right-icon__icon'>
<use class='bx--btn--right-icon__use' xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#add--glyph'></use>
</svg>
</button>
<a href='#' class='bx--btn'>
Button
<svg class='bx--btn--right-icon__icon'>
<use class='bx--btn--right-icon__use' xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#add--glyph'></use>
</svg>
</a>
<button class='bx--btn--secondary'>
Button
<svg class='bx--btn--right-icon__icon'>
<use class='bx--btn--right-icon__use' xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#add--glyph'></use>
</svg>
</button>
<a href='#' class='bx--btn--secondary'>
Button
<svg class='bx--btn--right-icon__icon'>
<use class='bx--btn--right-icon__use' xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#add--glyph'></use>
</svg>
</a>
Disabled buttons may be used when the user cannot proceed until input is collected.
<button class='bx--btn' type='button' disabled>Disabled button</button>
Sets of buttons are used when an action required by the user has more than one option. Always use a positive action button (primary) paired with a negative action button (secondary). Positive action buttons should be on the right, while negative action buttons will be on the left.
<div class='bx--sets-of-buttons'>
<button class='bx--btn--secondary' type='button'>Backward button</button>
<button class='bx--btn' type='button'>Forward button</button>
</div>
<div class='bx--sets-of-buttons'>
<a href='#' class='bx--btn--secondary' role='button'>Backward link</a>
<a href='#' class='bx--btn' role='button'>Forward link</a>
</div>
Small buttons may be used when there is not enough vertical space for a regular sized button. This issue is most commonly found in tables. Small buttons should have three words or less.
<button class='bx--btn bx--btn--sm' type='button'>Primary button small</button>
<a href='#' class='bx--btn bx--btn--sm' role='button'>Primary link small</a>
The copy button can be used when the user needs to copy information, such as a code snippet, to their clipboard.
<button data-copy-btn class='bx--btn--copy'>
Copy
<svg class='bx--btn--right-icon__icon'>
<use class='bx--btn--right-icon__use' xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v5/img/bluemix-icons.svg#copy--code'></use>
</svg>
<div class='bx--btn--copy__feedback' data-feedback='Copied!'></div>
</button>