##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Buttons

Buttons are essential interactive elements that enable users to trigger actions or navigate through your application. They serve as clear call-to-action elements, helping users understand what actions they can take. This guide demonstrates various button styles, sizes, and states to create intuitive and accessible user interfaces.

## Essential Button Patterns

### 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

Standard Button Variants
Loading...
Standard Button Variants
Loading...

### 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.

Button Size Variations
Loading...
Button Size Variations
Loading...

### 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

Icon-Only Buttons
Loading...
Icon-Only Buttons
Loading...

## Alternative Button Styles

### 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 Tags
Loading...
Button Tags
Loading...

### 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.

Button Outline
Loading...
Button Outline
Loading...

### 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.

Leading Icon Buttons
Loading...
Leading Icon Buttons
Loading...

### 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.

Trailing Icon Buttons
Loading...
Trailing Icon Buttons
Loading...

### 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.

Basic Block Buttons
Loading...
Basic Block Buttons
Loading...

Block buttons can be configured for different layouts:

Responsive Block Buttons
Loading...
Responsive Block Buttons
Loading...
Centered Block Buttons
Loading...
Centered Block Buttons
Loading...
Right-Aligned Block Buttons
Loading...
Right-Aligned Block Buttons
Loading...

## States & Behaviors

### 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.

Disabled Buttons
Loading...
Disabled Buttons
Loading...

### 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 Buttons
Loading...
Toggle Buttons
Loading...

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.

Toggle Links
Loading...
Toggle Links
Loading...

### 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.

Loading State Buttons
Loading...
Loading State Buttons
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates