Buttons

Buttons are essential components of web interfaces, providing users with interactive elements to perform actions or navigate through a web application.

They can be easily implemented and applied to various HTML elements, but they are most commonly used with a and button elements. They come in different styles to suit different purposes and visual designs. In our websystem they do not necessarily always have a lining around them, but they always have a hover effect to insinuate interactive capacity. There are multiple ways to create buttons, the button tag is not always used.

Regular Buttons

class btn
class btn-default
class btn-primary
class btn-success
class btn-info
class btn-warning
class btn-danger
class btn-link

Button Sizes

Bootstrap provides classes to adjust the size of buttons. You can add classes like btn-lg for large buttons, btn-sm for small buttons, and btn-xs for extra small buttons.

Button Groups

Bootstrap allows you to group buttons together using the btn-group class. This creates a cohesive visual grouping for related actions.

Accessibility

It's important to ensure that buttons are accessible to all users, including those using assistive technologies. You can achieve this by following these best practices:

  • Use Semantic HTML: Use semantic HTML elements like button or a for buttons to ensure proper accessibility.
  • Provide Descriptive Text: Ensure that buttons have descriptive text or aria-labels to provide context and clarity, especially for users who rely on screen readers.

By following these, you can ensure that buttons are accessible and usable for all users, regardless of their abilities or assistive technologies.

Note: All elements you want to style as a button will need the class btn.

Toggle switch buttons

Toggle switch buttons provide a user-friendly way to enable or disable a feature or option. This way it is always clear to the user if a functionality is on or off, which makes it a better option for several types of situations.

Below is an example of a commonly used switch button:

This specific example is created by adding the switch-button class to a div element, and filling it with an input of the type checkbox. This is why it works exactly like a checkbox.

When the switch is grey and says "NO" it is turned off, when it is green and says "YES" it is turned on

Link element buttons

Sometimes linked fontawesome icons are used to accomplish the same behavior. The icons documentation page can help with picking the proper options for any specific situation.

Below is an example of a switch button:

This is accomplished by first creating a link tag, and filling it with a span element that has the specific icon classes that you would want the button to look like. In this example the classes are fal fa-user fa-2x