Button

<bh-button> | BharatButton

Button component provides a customizable button with various sizes, variants, and styles.

Open in

ButtonPrimarySecondarySuccessWarningDanger

Basic Usage

Preview

Open in

Button

HTML

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

React

import React from 'react';
import { BharatButton } from 'bharat-ui/react/components/button';
function App() {
return (
      <BharatButton>Button</BharatButton>
);
}
export default App;

Sizes

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

Preview

Open in

SmallMediumLarge

HTML

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

React

import React from 'react';
import { BharatButton } from 'bharat-ui/react/components/button'
function App() {
return (
  <>
      <BharatButton size="small">Default</BharatButton>
      <BharatButton size="medium">Medium</BharatButton>
      <BharatButton size="large">Large</BharatButton>
  </>
);
}
export default App;

Variants

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

Preview

Open in

 

PrimarySecondarySuccessWarningDanger

HTML

<bh-button variant="primary">Primary</bh-button>
<bh-button variant="secondary">Secondary</bh-button>
<bh-button variant="success">Success</bh-button>
<bh-button variant="warning">Warning</bh-button>
<bh-button variant="danger">Danger</bh-button>

React

import React from 'react';
import { BharatButton } from 'bharat-ui/react/components/button';
function App() {
return (
  <>
      <BharatButton variant="success">Primary</BharatButton>
      <BharatButton variant="secondary">Secondary</BharatButton>
      <BharatButton variant="success">Success</BharatButton>
      <BharatButton variant="warning">Warning</BharatButton>
      <BharatButton variant="danger">Danger</BharatButton>
  </>
);
}
export default App;

Icon Buttons

Preview

Open in

Sign in with GoogleSign in with Apple

HTML

<bh-button iconName="google" iconColor="white" background="black" variant="primary">Sign in with Google</bh-button>
<bh-button iconName="apple" variant="secondary">Sign in with Apple</bh-button>

React

import React from 'react';
import { BharatButton } from 'bharat-ui/react/components/button'
function App() {
return (
  <>
      <BharatButton iconName="google" iconColor="white" background="black" variant="primary">Sign in with GoogleBharatButton>
      <BharatButton iconName="apple" variant="secondary">Sign in witApple</BharatButton>
  </>
);
}
export default App;

States

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

Preview

Open in

NormalDisabledLoading

HTML

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

React

import React from 'react';
import { BharatButton } from 'bharat-ui/react/components/button'
function App() {
return (
  <>
      <BharatButton >Normal</BharatButton>
      <BharatButton disabled>Disabled</BharatButton>
      <BharatButton loading>Loading</BharatButton>
  </>
  </>
);
}
export default App;

Properties

Property	Type	Description
variant	string	Button style variant (default, primary,secondary,success,warning,danger)
size	string	Button size (small, medium, large)
disabled	boolean	Whether the button is disabled
loading	boolean	Whether to show a loading indicator
type	string	HTML button type (button, submit, reset)
onClick	function	Click event handler