Government of
India
Powered by NeGD | MeitY Government of India® UX4G
Buttons
Use UX4G’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Examples #
UX4G comes with a variety of predefined button
styles, each having a distinct semantic function and a few
extras for further control.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
RESULT
Conveying meaning to assistive technologies
Color-coding to add meaningjust gives a visual cue, which users of assistive technologies like screen readers won't be able to understand. Make sure the information the color designates is either evident from the content itself (such as the visible text) or is included in another way, such as by hiding additional text using the .visually-hidden class.
Disable text wrapping #
It is possible to give the button .text-nowrap class
if it doesn't want the button text to wrap. In Sass, anyone may
prevent text wrapping for each button by setting
$btn-white-space: nowrap.
Button tags #
The <button> element is intended to be used
in conjunction with the .btn classes. The
<a> and <input> elements
can also utilize these classes, albeit some browsers may apply a
slightly different rendering.
Instead of linking to new pages or sections within the current
page when using button classes on <a>
elements that are used to activate in-page functionality (like
collapsing content), these links should be given a
role="button" to clearly communicate their function
to assistive technologies like screen readers.
<a class="btn btn-primary" href="#" role="button">Link</a><button class="btn btn-primary" type="submit">Button</button><input class="btn btn-primary" type="button" value="Input"/><input class="btn btn-primary" type="submit" value="Submit"/><input class="btn btn-primary" type="reset" value="Reset"/>
RESULT
Outline buttons #
In need of a button? But, don't want the strong backdrop colors
they bring. To exclude all background colors and pictures from
any button, substitute the .btn-outline-* modifier
classes for the default ones.
<button type="button" class="btn btn-outline-primary">Primary</button><button type="button" class="btn btn-outline-secondary">Secondary</button><button type="button" class="btn btn-outline-success">Success</button><button type="button" class="btn btn-outline-danger">Danger</button><button type="button" class="btn btn-outline-warning">Warning</button><button type="button" class="btn btn-outline-info">Info</button><button type="button" class="btn btn-outline-light">Light</button><button type="button" class="btn btn-outline-dark">Dark</button>
RESULT
Sizes #
Fancy larger or smaller buttons? Add .btn-lg or
.btn-sm for additional sizes.
<button type="button" class="btn btn-primary btn-lg">Large button</button><button type="button" class="btn btn-secondary btn-lg">Large button</button>
RESULT
<button type="button" class="btn btn-primary btn-sm">Small button</button><button type="button" class="btn btn-secondary btn-sm">Small button</button>
RESULT
You can even roll your own custom sizing with CSS variables:
<button type="button" class="btn btn-primary">Custom button</button>
RESULT
Disabled state #
Add the disabled boolean attribute to any button element to make
buttons appear inactive. Pointer-events: none are
applied to disabled buttons, preventing the activation of hover
and active states.
<button type="button" class="btn btn-primary" disabled>Primary button</button><button type="button" class="btn btn-secondary" disabled>Button</button><button type="button" class="btn btn-outline-primary" disabled>Primary button</button><button type="button" class="btn btn-outline-secondary" disabled>Button</button>
RESULT
The <a> element's disabled buttons have a
somewhat different behavior:
-
The disabled attribute is not supported by
<a>s, thus must add the .disabled class to make it visually appear disabled. - There are several styles that can be used in the future to disable all pointer-events on anchor buttons.
-
A disabled button should have the
aria-disabled="true"attribute to let assistive technologies know that it is disabled. - The href property should not be used on disabled buttons utilizing the <a> tag.
Link functionality caveat #
To cover cases where you have to keep the href
attribute on a
disabled link, the .disabled class uses
pointer-events: none to
try to disable the link functionality of
<a>s. Note that this
CSS property is not yet standardized for HTML, but all
modern browsers support it. In addition, even in browsers
that do support pointer-events: none, keyboard
navigation
remains unaffected, meaning that sighted keyboard users and
users of assistive technologies will still be able to
activate these links. So to be safe, in addition to
aria-disabled="true", also include a
tabindex="-1" attribute
on these links to prevent them from receiving keyboard
focus, and use custom JavaScript to disable their
functionality altogether.
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>RESULT
Block buttons #
Create responsive stacks of full-width, “block buttons” like those in UX4G with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>RESULT
Here we create a responsive variation, starting with
vertically
stacked buttons until the md breakpoint, where
.d-md-block replaces
the .d-grid class, thus nullifying the
gap-2 utility. Resize your
browser to see them change.
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>RESULT
You can adjust the width of your block buttons with
grid column width
classes. For example, for a half-width “block button”, use
.col-6.
Center it horizontally with .mx-auto, too.
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>RESULT
Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they’re no longer stacked.
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>RESULT
Button plugin #
The button plugin allows you to create simple on/off toggle buttons.
Visually, these toggle buttons are identical to the checkbox toggle buttons. However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as “checked”/“not checked” (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as “button”/“button pressed”. The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
Toggle states #
Add data-bs-toggle="button" to toggle a button’s
active state. If
you’re pre-toggling a button, you must manually add the
.active
class and aria-pressed="true" to ensure that it is
conveyed
appropriately to assistive technologies.
<p class="d-inline-flex gap-1">
<button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>
<p class="d-inline-flex gap-1">
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>RESULT
<p class="d-inline-flex gap-1">
<a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>
<p class="d-inline-flex gap-1">
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>RESULT
Methods #
You can create a button instance with the button constructor, for example:
const bsButton = new ux4g.Button('#myButton')| Method | Description |
|---|---|
dispose |
Destroys an element’s button. (Removes stored data on the DOM element) |
getInstance |
Static method which allows you to get the button
instance associated with a DOM element, you can use
it like this:
ux4g.Button.getInstance(element).
|
getOrCreateInstance |
Static method which returns a button instance
associated with a DOM element or creates a new one
in case it wasn’t initialized. You can use it like
this:
ux4g.Button.getOrCreateInstance(element).
|
toggle |
Toggles push state. Gives the button the appearance that it has been activated. |
For example, to toggle all buttons
const bsButton = new ux4g.Button('#myButton')