Buttons
Buttons can be used to trigger user actions, such as submitting forms, opening modal dialogs, etc. Different types of buttons are available for different types of actions.
Commenting
|
New message!
Jane Doe just sent you a new message.
|
Buttons can be used to trigger user actions, such as submitting forms, opening modal dialogs, etc. Different types of buttons are available for different types of actions.
<!-- Most commonly used buttons -->
<button class="btn" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-link" type="button">Link</button>
<!-- Less commonly used, but still available -->
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-secondary" type="button">Secondary</button>
Please note that contextual buttons can be styled using the following CSS selectors:
This means that something like .btn-primary {...}/.dark-mode .btn-primary {...} is not enough. This is because of how button styles are structured in Halfmoon.
While the .btn classes are designed to work with the <button> element, they can also be used with elements such as <input> and <a> to create buttons.
<button class="btn" type="button">Default</button>
<input class="btn btn-primary" type="submit" value="Submit">
<a href="#" class="btn btn-link" role="button">Link</a>
Buttons will also work with the <input> element with the type="button" and type="reset" attributes.
Different sizes of buttons are also available:
<!-- Large buttons -->
<button class="btn btn-lg" type="button">Default</button>
<button class="btn btn-primary btn-lg" type="button">Primary</button>
<!-- Small buttons -->
<button class="btn btn-sm" type="button">Default</button>
<button class="btn btn-primary btn-sm" type="button">Primary</button>
<!-- Block buttons -->
<div class="row">
<div class="col-md-6">
<button class="btn btn-block" type="button">Default</button>
<button class="btn btn-primary btn-block" type="button">Primary</button>
</div>
</div>
Buttons can be disabled by adding the disabled="..." attribute to them. In order to just style the button to look disabled, the class .disabled can be added. However, it should be noted that this does not actually disable the button, it only styles it.
<!-- Disabled buttons -->
<button class="btn" type="button" disabled="disabled">Default</button>
<button class="btn btn-primary disabled" type="button">Primary</button> <!-- Not actually disabled, only styled to look the part -->
Buttons with the class .active are styled with a focus effect around them.
<!-- Active buttons -->
<button class="btn active" type="button">Default</button>
<button class="btn btn-primary active" type="button">Primary</button>
Please note that the .active class is added automatically to buttons which are used as dropdown toggles. See the examples in the dropdown (opens in new tab) section.
Default buttons with the class .alt-dm will have an alternate appearance in dark mode. Their appearance will be unchanged in light mode.
<!-- Alternate in dark mode (unchanged in light mode) -->
<button class="btn alt-dm" type="button">Alt. in dark mode</button>
These buttons are designed to look good and be usable on the colorful backgrounds in dark mode. For example, they can be used to great effect on contextual alerts in dark mode (opens in new tab).
Buttons with the class .btn-square will be square in shape. These buttons are generally great for creating action buttons with icons. You can also use the .btn-sm and .btn-lg classes for different sizes.
<!-- Square button -->
<button class="btn btn-square" type="button">×</button>
<!-- Link styled as circle primary button -->
<a href="#" class="btn btn-square btn-primary rounded-circle" role="button">+</a> <!-- rounded-circle = border-radius: 50% -->
<!-- Small square button -->
<button class="btn btn-square btn-sm" type="button">1</button>
<!-- Normal square button -->
<button class="btn btn-square btn-primary" type="button">2</button>
<!-- Large square button -->
<button class="btn btn-square btn-lg" type="button">3</button>
By default, buttons have slightly rounded border-radius properties. The .btn-rounded class can be used to create buttons that are properly rounded in shape. You can also use the .btn-sm and .btn-lg classes for different sizes.
<!-- Rounded button -->
<button class="btn btn-rounded" type="button">Default</button>
<!-- Link styled as rounded primary button -->
<a href="#" class="btn btn-rounded btn-primary" role="button">Primary</a>
<!-- Small rounded button -->
<button class="btn btn-rounded btn-sm" type="button">Small</button>
<!-- Normal rounded button -->
<button class="btn btn-rounded" type="button">Default</button>
<!-- Large rounded button -->
<button class="btn btn-rounded btn-lg" type="button">Large</button>
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
The following people have generously decided to support Halfmoon.
Become a backer on Patreon .