Buttons

Standard Buttons

Choose from our comprehensive set of button styles to effectively communicate different types of actions:

• Primary: The main action that users are most likely to take (e.g., Submit, Save, Continue)
• Secondary: Alternative or supporting actions that are less prominent (e.g., Cancel, Back)
• Success: Positive actions that complete or confirm something (e.g., Approve, Complete)
• Danger: Destructive or irreversible actions that require caution (e.g., Delete, Remove)
• Warning: Actions that need user attention or might have consequences
• Info: Actions related to information or help

Button Sizes

Button sizes allow you to adjust the size of the button for different use cases. You can choose from extra small (btn-xs), small (btn-sm), medium (default), large (btn-lg), or extra large (btn-xl) buttons. These size classes give you flexibility in your UI design to create visual hierarchy and emphasize different actions.

Icon Buttons

Icon buttons provide a compact way to represent actions using clear, meaningful icons. Available in multiple sizes using classes like btn-icon-xs, btn-icon-sm, btn-icon (default), btn-icon-lg, and btn-icon-xl. Each size is optimized for different use cases:

• Extra Small (btn-icon-xs): Perfect for compact toolbars and dense UIs
• Small (btn-icon-sm): Ideal for social sharing buttons and secondary actions
• Default (btn-icon): Standard size for common actions
• Large (btn-icon-lg): Enhanced visibility for important actions
• Extra Large (btn-icon-xl): Floating action buttons (FAB) and primary actions

Button Tags

Buttons can be created using different HTML elements based on their purpose:

• <button>: For clickable actions within forms or UI
• <a>: For navigation or external links styled as buttons
• <input>: For form submissions and input-based actions

Button Outline

Button outlines are a variation of buttons where the button's background is transparent, and it has a border and text color that matches the button's theme. This gives the button a more minimalistic look, typically used for secondary actions or when you want a less prominent button.

Leading Icon Buttons

Buttons with leading icons place the icon before the text, creating a natural visual flow where the icon acts as a prefix to the label. This pattern is commonly used when the icon represents the action that will be performed (e.g., a save icon before "Save"), making the button's purpose immediately clear to users.

Trailing Icon Buttons

Buttons with trailing icons place the icon after the text, which can be useful for indicating the outcome of an action (e.g., "Open in new window" with an external link icon) or suggesting directional movement (e.g., "Next" with a forward arrow). This pattern helps users understand what will happen when they click the button.

Block Buttons

Block buttons are full-width buttons that stretch to fill the available width of their parent container. This is achieved by placing the buttons inside a container with the d-grid class and setting the gap-2 class for spacing between them.

Block buttons can be configured for different layouts:

Disabled Buttons

The disabled attribute can be added to buttons to make them unclickable, indicating that they are not currently available for interaction. This is commonly used for actions that are unavailable due to the current state of the application.

Toggle States

Toggle buttons allow users to switch between two states, such as "active" and "inactive." When the button is clicked, it changes its appearance and state, providing feedback to the user. The data-bs-toggle="button" attribute is used to enable this toggling functionality. The aria-pressed="true" attribute indicates the active state for accessibility.

Toggle links work similarly to toggle buttons but are used as clickable links. By adding the data-bs-toggle="button" attribute, the link can toggle between "active" and "inactive" states.

Loading State Buttons

Loading state buttons provide visual feedback during asynchronous operations. They combine animated icons with disabled states to indicate that an action is in progress. This prevents multiple submissions and improves user experience by showing that the system is responding.