Buttons are created with the .jenkins-button CSS class. There are a number of different styles that can be added by adding another class alongside, such as .jenkins-button--primary. Styling links as buttons is also supported.

Each form should have only one primary button. Most other buttons should just be the default one. Destructive buttons should be used when something will be deleted or not easily undone. Generally these should have a confirmation page.

You can pair buttons with color modifier classes, like so:

Tertiary buttons should be used for buttons which have minimal interaction or for those where a background creates too much visual clutter:

Buttons can include symbols and they'll be automatically sized to fit correctly:

Copy Button

A small button to copy text into a clipboard.

The tag creates a small button that allows users to paste text into the clipboard. The tag requires two mandatory attributes:

• text - copy.parameters.text
• message - copy.parameters.message

Help Button

The tag creates a custom button to get help about a page. The button should always be in the top right of a page, last in the row of components. The tag has one mandatory attribute:

• href - The page to navigate to on click.