bellhop by actabl

Components

search
Accordion
App Bar
Avatar
Avatar Stacked
Badge
Badge Dot
Breadcrumbs
Button
Button Icon
Card
Checkbox
Checkbox Group
Container
Data Grid
Date Picker
Date Range Picker
Dropdown
Empty State
Illustrations
Input Autocomplete
Input Number
Input Password
Input Text
Input Verification
Loader Spinner
Logo Box
Modal
Notification
Page Navigation
Pagination
Popover
Product Switcher
Property Switcher
Radio Button
Sidebar
Skeleton Loader
Tabs
Tag
Textarea
Toggle
Tooltip

Buttons

Buttons are interactive elements that trigger an action. They communicate calls to action to the user and allow users to interact with pages in a variety of ways.

When to use

Use buttons to communicate actions users can take throughout your product. Buttons should be easy to find and understand.

Primary Actions

Use primary buttons for the main action on a page or in a dialog.

Secondary Actions

Use secondary buttons for less important actions.

Destructive Actions

Use danger buttons when an action is potentially destructive.

When not to use

  • For navigation between pages—use links instead as they're more semantic and SEO-friendly
  • When a simple text link would be less visually prominent and more appropriate
  • For actions that trigger instantly without user confirmation—consider using a toggle or checkbox
  • In dense data tables where icon buttons would be more space-efficient

Examples

Interact with live examples and copy the code to use in your project.

Button Hierarchies

Four hierarchy levels to establish visual priority in your interfaces

chevron_right HTML 
<bh-button hierarchy="primary" size="md" label="Primary"></bh-button>
<bh-button hierarchy="secondary" size="md" label="Secondary"></bh-button>
<bh-button hierarchy="tertiary" size="md" label="Tertiary"></bh-button>
<bh-button hierarchy="quaternary" size="md" label="Quaternary"></bh-button>
chevron_right React 
import { BhButton } from '@actabldesign/bellhop-react';

function MyComponent() {
  return (
    <>
      
      
      
      
    
  );
}
chevron_right Angular 
<bh-button hierarchy="primary" size="md" label="Primary"></bh-button>
<bh-button hierarchy="secondary" size="md" label="Secondary"></bh-button>
<bh-button hierarchy="tertiary" size="md" label="Tertiary"></bh-button>
<bh-button hierarchy="quaternary" size="md" label="Quaternary"></bh-button>

Buttons with Icons

Add leading or trailing icons to provide additional context

chevron_right HTML 
<bh-button hierarchy="primary" size="md" label="Download" icon="leading" icon-name="download"></bh-button>
<bh-button hierarchy="secondary" size="md" label="Next" icon="trailing" icon-name="arrow_forward"></bh-button>
chevron_right React 
import { BhButton } from '@actabldesign/bellhop-react';

function MyComponent() {
  return (
    <>
      
      
    
  );
}
chevron_right Angular 
<bh-button hierarchy="primary" size="md" label="Download" icon="leading" icon-name="download"></bh-button>
<bh-button hierarchy="secondary" size="md" label="Next" icon="trailing" icon-name="arrow_forward"></bh-button>

Anatomy

Buttons consist of several key parts that work together to create an effective interactive element.

  1. Icon Leading (Optional)

    Left-aligned icon that precedes the label, providing visual context

  2. Label

    Text that describes the button's action clearly and concisely

  3. Icon Trailing (Optional)

    Right-aligned icon that follows the label, often indicating direction or state

  4. Container

    Background and border that defines the button's clickable area

Types

Buttons come in different hierarchies to help establish visual priority.

Primary

Main call-to-action with the highest visual weight

Secondary

Supporting actions with less visual prominence

Tertiary

Minimal visual weight for less important actions

Quaternary

Text-only buttons for the lowest visual hierarchy

Interaction

Understanding button states helps users know when they can interact.

Default

Standard appearance when not interacting

Disabled

Indicates action is not available

Loading

Shows action is in progress

Placement

Proper button placement helps users complete tasks efficiently.

Placement guidelines coming soon...

Accessibility

Buttons are designed to be accessible to all users.

Keyboard Navigation

  • Tab - Move focus to the button
  • Enter/Space - Activate the button
  • Shift + Tab - Move focus to previous element

Screen Reader

  • Button role is properly announced
  • Label text is clearly communicated
  • Disabled state is announced
  • Loading state provides feedback

Focus Indicator

  • Visible focus ring on keyboard navigation
  • High contrast border for visibility
  • Maintains 3:1 contrast ratio