Wt Widget Gallery

Forms — widgets and support classes for capturing user information

Push buttons

Wt provides different kinds of button widgets. With a WPushButton a user can execute a command by a click action, e.g. an OK button is generally used for confirming actions and closing the window while a Cancel button is used for canceling actions and closing the window.

A WPushButton corresponds to an HTML <button> element.

A push button typically responds to clicked() events.

You may decorate a push button with a background image to create a clickable image. As a descendant of class WFormWidget, push buttons can be disabled or enabled.

Example
source 
#include <Wt/WPushButton.h>
#include <Wt/WTemplate.h>


auto result = std::make_unique<Wt::WTemplate>();

result->setTemplateText("<div> ${pb1} ${pb2} </div>");

auto pb = result->bindWidget("pb1", std::make_unique<Wt::WPushButton>("Click me!"));  // By default the button is enabled.

pb = result->bindWidget("pb2", std::make_unique<Wt::WPushButton>("Try to click me..."));
pb->setEnabled(false);          // The second button is disabled.

Top

One-time hit button

A push button can be designated to be pushed only once and as a result execute a command only once.

Example
source 
#include <Wt/WPushButton.h>

auto okPtr = std::make_unique<Wt::WPushButton>("Send");
auto ok = okPtr.get();

ok->clicked().connect(ok, &Wt::WPushButton::disable);
ok->clicked().connect([=] {
    ok->setText("Thank you");
});

Top

You can also associate navigation with a button using WPushButton::setLink(). With this method you can change the internal path of the application. As a result the button behaves as an anchor. This is similar to how a WMenuWidget or a WTabWidget works. See the menu Navigation for more details.

With a push button you can execute an action while navigating to a hyperlink target at the same time using WPushButton::setLink(). This method accepts a WLink as parameter.

In the example below, the internal path is changed from /forms/button (the path associated with the current web page) to /navigation/anchor.

Example Navigate
source 
#include <Wt/WPushButton.h>

auto button = std::make_unique<Wt::WPushButton>("Navigate");
button->setLink(Wt::WLink(Wt::LinkType::InternalPath, "/navigation/anchor"));

Top

A drop down button is a button with a drop down menu. It could be used to extend a line edit with possible actions on the input. Usually the menu items are links.

Example
source 
#include <Wt/WLineEdit.h>
#include <Wt/WLink.h>
#include <Wt/WPopupMenu.h>
#include <Wt/WPushButton.h>
#include <Wt/WTemplate.h>


auto result =
    std::make_unique<Wt::WTemplate>(Wt::WString::tr("appendedDropdownButton-template"));

auto popup =
    std::make_unique<Wt::WPopupMenu>();

// Create some menu items for the popup menu
popup->addItem("Choose a button type");
popup->addSeparator();
popup->addItem("One-time hit button")->setLink(Wt::WLink("#one-time"));
popup->addItem("Navigation button")->setLink(Wt::WLink("#navigation"));
popup->addItem("Button style")->setLink(Wt::WLink("#style"));

auto input = std::make_unique<Wt::WLineEdit>();
result->bindWidget("input", std::move(input));

auto button = result->bindWidget("appendedButton", std::make_unique<Wt::WPushButton>("Action"));
button->setMenu(std::move(popup));

Here is the corresponding XML template (with message id= "appendedDropdownButton-template") using style classes from the Bootstrap theme.

source 
<div class="form-inline">
  <div class="form-group">
    ${input}
  </div>
  <div class="form-group">
      ${appendedButton}
  </div>
</div>

Top

Button style

You can add different styles to buttons to change the color, the size, the positioning, etc. using style classes from the Bootstrap theme. Button styles can be applied to anything with the .btn class applied. However, for the best rendering, apply these to hyperlinks (<a>) and button controls (<button>) only.

Button color

The following table provides an overview of the standard color classes and visualizes the effect on a button. The .btn class is applied to a button control by default; you only have to set additional classes.

Example
Button Class Description
Default style configured by the library (gray, with gradient)
btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn-info Used as an alternative to the default styles
btn-success Indicates a successful or positive action
btn-warning Indicates caution should be taken with this action
btn-danger Indicates a dangerous or potentially negative action
btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Here is the underlying program showing how to assign the appropriate color style class to a button.

source 
#include <Wt/WPushButton.h>
#include <Wt/WTemplate.h>


auto result =
    std::make_unique<Wt::WTemplate>(Wt::WString::tr("pushButtonColor-template"));

auto button = std::make_unique<Wt::WPushButton>("Default");
result->bindWidget("button-default", std::move(button));

button = std::make_unique<Wt::WPushButton>("Primary");
button->setStyleClass("btn-primary");
result->bindWidget("button-primary", std::move(button));

button = std::make_unique<Wt::WPushButton>("Info");
button->setStyleClass("btn-info");
result->bindWidget("button-info", std::move(button));

button = std::make_unique<Wt::WPushButton>("Success");
button->setStyleClass("btn-success");
result->bindWidget("button-success", std::move(button));

button = std::make_unique<Wt::WPushButton>("Warning");
button->setStyleClass("btn-warning");
result->bindWidget("button-warning", std::move(button));

button = std::make_unique<Wt::WPushButton>("Danger");
button->setStyleClass("btn-danger");
result->bindWidget("button-danger", std::move(button));

button = std::make_unique<Wt::WPushButton>("Inverse");
button->setStyleClass("btn-inverse");
result->bindWidget("button-inverse", std::move(button));

button = std::make_unique<Wt::WPushButton>("Link");
button->setStyleClass("btn-link");
result->bindWidget("button-link", std::move(button));

Here is the corresponding XML template (with message id="pushButtonColor-template"). Note that there is no style applied to the buttons here; this is dealt with in the program. As a result it's easy to change the style on-the-fly.

source 
<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Button</th>
      <th>Class</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>${button-default}</td>
      <td><tt></tt></td>
      <td>Default style configured by the library (gray, with gradient)</td>
    </tr>
    <tr>
      <td>${button-primary}</td>
      <td><tt>btn-primary</tt></td>
      <td>Provides extra visual weight and identifies the primary action
          in a set of buttons</td>
    </tr>
    <tr>
      <td>${button-info}</td>
      <td><tt>btn-info</tt></td>
      <td>Used as an alternative to the default styles</td>
    </tr>
    <tr>
      <td>${button-success}</td>
      <td><tt>btn-success</tt></td>
      <td>Indicates a successful or positive action</td>
    </tr>
    <tr>
      <td>${button-warning}</td>
      <td><tt>btn-warning</tt></td>
      <td>Indicates caution should be taken with this action</td>
    </tr>
    <tr>
      <td>${button-danger}</td>
      <td><tt>btn-danger</tt></td>
      <td>Indicates a dangerous or potentially negative action</td>
    </tr>
    <tr>
      <td>${button-inverse}</td>
      <td><tt>btn-inverse</tt></td>
      <td>Alternate dark gray button, not tied to a semantic action or
          use</td>
    </tr>
    <tr>
      <td>${button-link}</td>
      <td><tt>btn-link</tt></td>
      <td>Deemphasize a button by making it look like a link while
          maintaining button behavior</td>
    </tr>
  </tbody>
</table>

Top

Button size

Instead of using the default size, you can apply a larger or smaller size to a button. Add the style class .btn-large, .btn-small,or .btn-mini to change the size.

Example

Here is the underlying program showing how to assign the appropriate size style class to a button.

source 
#include <Wt/WPushButton.h>
#include <Wt/WTemplate.h>

auto result =
    std::make_unique<Wt::WTemplate>(Wt::WString::tr("pushButtonSize-template"));

auto button = std::make_unique<Wt::WPushButton>("Large");
button->setStyleClass("btn-lg");
result->bindWidget("button-large", std::move(button));

button = std::make_unique<Wt::WPushButton>("Default");
result->bindWidget("button-default", std::move(button));

button = std::make_unique<Wt::WPushButton>("Small");
button->setStyleClass("btn-sm");
result->bindWidget("button-small", std::move(button));

button = std::make_unique<Wt::WPushButton>("Mini");
button->setStyleClass("btn-xs");
result->bindWidget("button-mini", std::move(button));

Here is the corresponding XML template (with message id="pushButtonSize-template"). Note that there is no style applied to the buttons here; this is dealt with in the program.

source 
<div>
  ${button-large}
  <p>${button-default}</p>
  <p>${button-small}</p>
  ${button-mini}
</div>

Top

Primary button

You can create a primary button - one that is more striking - by adding the .btn-primary style to it.

Example
source 
#include <Wt/WContainerWidget.h>
#include <Wt/WPushButton.h>
#include <Wt/WTemplate.h>

auto container = std::make_unique<Wt::WContainerWidget>();

Wt::WPushButton *button = container->addNew<Wt::WPushButton>("Save");
button->setStyleClass("btn-primary");

button = container->addNew<Wt::WPushButton>("Cancel");
button->setMargin(5, Wt::Side::Left);

Top

Buttons in a form

Usually, a form ends with a group of actions (buttons). You can make the action section more striking compared to the upper input field section by adding the style class .form-actions. When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls (See the example at Forms > Form model).

Example
source 
#include <Wt/WPushButton.h>
#include <Wt/WTemplate.h>


auto result =
    std::make_unique<Wt::WTemplate>(Wt::WString::tr("pushButtonAction-template"));

auto button = result->bindWidget("button-save", std::make_unique<Wt::WPushButton>("Save"));
button->setStyleClass("btn-primary");

result->bindWidget("button-cancel", std::make_unique<Wt::WPushButton>("Cancel"));

Here is the corresponding XML template (with message id="pushButtonAction-template") showing how to assign the appropriate style class to the action section.

source 
<div class="form-actions">
  ${button-save} ${button-cancel}
</div>

Top