Button

<bh-button>

The bh-button component provides a customizable button with various sizes, variants, and styles that match the Bharat UI design system.

Basic Usage

Preview

Button

HTML

<bh-button>Button</bh-button>

Sizes

Use the size attribute to set the button’s sizing.

Preview

SmallMediumLarge

HTML

<bh-button size="small">Small</bh-button>
<bh-button size="medium">Medium</bh-button>
<bh-button size="large">Large</bh-button>

Variants

Use the variant attribute to set the button’s semantic variant.

Preview

 

PrimarySecondarySuccessWarningDanger

 

GradientTricolor

HTML

<bh-button size="medium" variant="primary">Primary</bh-button>
<bh-button size="medium" variant="secondary">Secondary</bh-button>
<bh-button size="medium" variant="success">Success</bh-button>
<bh-button size="medium" variant="warning">Warning</bh-button>
<bh-button size="medium" variant="danger">Danger</bh-button>
<bh-button size="medium" variant="gradient">Gradient</bh-button>
<bh-button size="medium" variant="tricolor">Tricolor</bh-button>

States

Buttons can have different states like disabled, loading, etc.

Preview

NormalDisabledLoading

HTML

<bh-button>Normal</bh-button>
<bh-button disabled>Disabled</bh-button>
<bh-button loading>Loading</bh-button>

Button Grid

Here’s a comprehensive grid showing various button combinations:

Preview

Primary	Gradient	Tricolor
Primary Small	Gradient Small	Tricolor Small
Primary Medium	Gradient Medium	Tricolor Medium
Primary Large	Gradient Large	Tricolor Large

HTML

<!-- Corner Radius Variations -->
<div class="button-row">
  <bh-button class="rounded-none">No Radius</bh-button>
  <bh-button class="rounded-sm">Small Radius</bh-button>
  <bh-button class="rounded-md">Medium Radius</bh-button>
  <bh-button class="rounded-lg">Large Radius</bh-button>
  <bh-button class="rounded-full">Pill Button</bh-button>
</div>

<!-- Complete Grid with Different Border Radii -->
<div class="button-grid">
  <bh-button size="small" class="rounded-sm">Default Small</bh-button>
  <bh-button size="small" variant="primary" class="rounded-md">Primary Small</bh-button>
  <bh-button size="small" variant="gradient" class="rounded-lg">Gradient Small</bh-button>
  <bh-button size="small" variant="tricolor" class="rounded-full">Tricolor Small</bh-button>

  <bh-button size="medium" class="rounded-sm">Default Medium</bh-button>
  <bh-button size="medium" variant="primary" class="rounded-md">Primary Medium</bh-button>
  <bh-button size="medium" variant="gradient" class="rounded-lg">Gradient Medium</bh-button>
  <bh-button size="medium" variant="tricolor" class="rounded-full">Tricolor Medium</bh-button>

  <bh-button size="large" class="rounded-sm">Default Large</bh-button>
  <bh-button size="large" variant="primary" class="rounded-md">Primary Large</bh-button>
  <bh-button size="large" variant="gradient" class="rounded-lg">Gradient Large</bh-button>
  <bh-button size="large" variant="tricolor" class="rounded-full">Tricolor Large</bh-button>
</div>

CSS

/* Button layout styles */
.button-showcase {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.showcase-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #555;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* Button radius variations */
.rounded-none {
  --bh-button-border-radius: 0px !important;
}

.rounded-sm {
  --bh-button-border-radius: 4px !important;
}

.rounded-md {
  --bh-button-border-radius: 8px !important;
}

.rounded-lg {
  --bh-button-border-radius: 12px !important;
}

.rounded-full {
  --bh-button-border-radius: 9999px !important;
}

Event Handling

You can handle button clicks using the onClick property or event listeners.

Danger

Event Handling is an experimental feature and may be stable.

Preview

Click Me

HTML

<bh-button id="demo-button">Click Me</bh-button>

JavaScript

document.getElementById('demo-button').addEventListener('click', () => {
  alert('Button clicked!');
});

Properties

Property	Type	Default	Description
variant	string	”default”	Button style variant (default, gradient, tricolor)
size	string	”medium”	Button size (small, medium, large)
disabled	boolean	false	Whether the button is disabled
loading	boolean	false	Whether to show a loading indicator
type	string	”button”	HTML button type (button, submit, reset)
onClick	function	null	Click event handler