Buttons Recommendations

Last modified by Vincent Massol on 2024/02/26 17:54

 XWiki
 Design
 Completed
 

Description

Buttons Usage Recommendations

Buttons Types Usage

Primary action 

  • Class primaryButton (recommended)


<input type="button" class="primaryButton" value="Login"/>

  • Old Version


<span class="buttonwrapper">
  <input type="submit" value="Login" class="button"/>
</span>

Secondary Action

  • Class secondaryButton (recommended)


<input type="button" class="secondaryButton" value="Cancel"/>

  • Old Version

Cancel
<span class="xwikibuttonlink"><a href="">Cancel</a></span>

Common Actions 


<input class="button" type="submit" value="Login"/>

Primary/Secondary Buttons Code

HTML

<input type="button" class="primaryButton" value="Login"/>
<input type="button" class="secondaryButton" value="Cancel"/>

CSS

.primaryButton{
background:transparent url(images/buttons3.png) repeat-x scroll right top;
border:1px solid #8F908E;
color:#FFFFFF;
display:inline;
line-height:1.35em !important;
margin:0 !important;
min-height:24px !important;
white-space:nowrap;
}
.primaryButton:hover {
background:transparent url(images/buttons3.png) repeat-x scroll right 25%;
border-color:#94AD12;
color:#333333;
}
.secondaryButton{
background-color:transparent;
color:#00007E;
padding: 0;
border: 0;
margin-left: 10px;
font-weight: normal;
}
.secondaryButton:hover {
border-bottom: 1px solid #00007E;
}

GWT Buttons Code

Failed to execute the [html] macro. Cause: [When using HTML content inline, you can only use inline HTML content. Block HTML content (such as tables) cannot be displayed. Try leaving an empty line before and after the macro.]. Click on this message for details.

gwtButtons.png

HTML

<div class="xwikigwt-editfield-actions">
 <button class="gwt-Button xwikigwt-editfield-cancel xwikigwt-cancel" tabindex="0" type="button">Cancel</button>
 <button class="gwt-Button xwikigwt-editfield-next xwikigwt-next" tabindex="0" type="button">Save</button>
</div>

CSS

div.xwikigwt-editfield tr.dialogMiddle td.dialogMiddleCenter div.xwikigwt-editfield-actions {
margin-top:10px;
width: 75%;
}
div.xwikigwt-editfield tr.dialogMiddle td.dialogMiddleCenter div.xwikigwt-editfield-actions .xwikigwt-cancel{
background-color:#ffffff;
color:#00007E;
padding: 0;
border: 0;
float: right;
}
div.xwikigwt-editfield tr.dialogMiddle td.dialogMiddleCenter div.xwikigwt-editfield-actions .xwikigwt-next{
background-color:#dddddd;
color:#000;
}

 

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected