Skip to main content

Button

When To Use​

Buttons in Hybrid Design are used to perform one or more operations. When clicked, a button triggers the corresponding business logic. In Hybrid Design, we offer five types of buttons:

  • Primary button: This button indicates the main action and there should only be one primary button in each section.
  • Default button: This button represents a series of actions without priority.
  • Dashed button: This button is commonly used for adding an action.
  • Text button: This button is used for the most secondary action.
  • Link button: This button is used for external links.

Additionally, we have four other properties that can be applied to any type of button:

  • danger: This property is used for actions that involve risk, such as deletion or authorization.
  • disabled: This property indicates when actions are not available.
  • loading: This property adds a loading spinner to the button, preventing multiple submits.

In HybridUI, the available button types are primary, default, dashed, text, and link.

How to use it​

npm install @hybridui/button

Examples​

Type​

Hybrid-UI includes several types of buttons, such as primary, default, dashed, text, and link buttons.

Primary ButtonPrimary ButtonPrimary ButtonPrimary ButtonPrimary Button

Show code
import { HyButton } from "@hybridui/button/react";

export default function App() {
  return (
    <div className="App">
      <HyButton type="primary">Primary Button</HyButton>
      <HyButton>Primary Button</HyButton>
      <HyButton type="dashed">Primary Button</HyButton>
      <HyButton type="text">Primary Button</HyButton>
      <HyButton type="link">Primary Button</HyButton>
    </div>
  );
}
CSS Varibale
#### Default
AttributeValue
--hybrid-button-background-color
#f9f9f9
--hybrid-button-border-color
#d0d0d0
--hybrid-button-text-color
#393939
--hybrid-button-hover-border-color
#1677ff
--hybrid-button-hover-color
#1677ff
--hybrid-button-active-border-color
#1661b1
--hybrid-button-active--color
#184d86
--hybrid-button-padding-y0.5rem
rem
--hybrid-button-padding-x0.5rem
rem
--hybrid-button-padding-r0.8rem
rem
--hybrid-button-padding-l0.8rem
rem
--hybrid-button-border-radius0.25rem
rem
--hybrid-button-border-width1px
px
--hybrid-button-font-size0.8rem
rem
--hybrid-button-font-weight0.8rem
--hybrid-button-text-transformnone

Primary​

AttributeValue
--hybrid-button-primary-background-color
#1277e1
--hybrid-button-primary-border-color
#1277e1
--hybrid-button-primary-text-color
#ffffff
--hybrid-button-primary-hover-background-color
#0a70ff
--hybrid-button-primary-hover-border-color
#1677ff
--hybrid-button-primary-active-background-color
#0559cf
--hybrid-button-primary-active-border-color
#1677ff

Dashed​

AttributeValue
--hybrid-button-dashed-hover-border-color
#1277e1
--hybrid-button-dashed-hover-text-color
#1277e1
--hybrid-button-dashed-active-border-color
#1677ff

Text​

AttributeValue
--hybrid-button-text-hover-background-color
#e1e1e1
--hybrid-button-text-active-background-color
#c1c1c1
AttributeValue
--hybrid-button-link-text-color
#1677ff
--hybrid-button-link-hover-text-color
#4a96ff
--hybrid-button-link-active-text-color
#0862df
Codesandbox (React example)

Icon​

To include an Icon in a Button component, you can either set the icon property or add an Icon component inside the Button. However, if you want more precise control over the positioning and arrangement of the Icon, it's best to add the Icon component inside the Button rather than relying on the icon property.

BSearchSearchSearch

Show code
import { HyButton } from "@hybridui/button/react";

export default function App() {
  return (
    <div className="App">
      <HyButton icon="search" type="primary"></HyButton>
      <HyButton icon="search" shape="circle" type="primary"></HyButton>
      <HyButton shape="circle" type="primary">
        B
      </HyButton>
      <HyButton icon="search" type="primary"> Search </HyButton>
      <HyButton icon="search" shape="circle"></HyButton>
      <HyButton icon="search">Search</HyButton>
      <HyButton icon="search" shape="circle" type="dashed"></HyButton>
      <HyButton icon="search" type="dashed"> Search </HyButton>
    </div>
  );
}
Codesandbox (React example)

Size​

HybridUI provides support for three button sizes: default, large, and small. To specify a desired size, set the size property to either "large" or "small". For a button with the default size, you can omit the size property.

Small Size Button Default Size ButtonLarge Size Button
Small Size Button Default Size ButtonLarge Size Button
Link Size ButtonIcon big Size with text Button

Show code
import { HyButton } from "@hybridui/button/react";

export default function App() {
  return (
    <div className="App">
      <HyButton size="small">Small Size Button</HyButton>
      <HyButton> Default Size Button</HyButton>
      <HyButton size="large">Large Size Button</HyButton>
      <br />
      <HyButton type="primary" size="small"> Small Size Button </HyButton>
      <HyButton type="primary"> Default Size Button</HyButton>
      <HyButton type="primary" size="large"> Large Size Button </HyButton>
      <br />
      <HyButton type="link" size="large"> Link Size Button </HyButton>
      <HyButton icon="user" type="dashed" size="large"> Icon big Size with text Button </HyButton>
      <HyButton icon="search" type="dashed" size="large"></HyButton>
      <HyButton icon="search" type="dashed" size="small"></HyButton>
    </div>
  );
}

Codesandbox (React example)

Loading​

To add a loading indicator to a button, you can set the loading property on the Button.

loadingloadingClick Me

Show code
import { HyButton } from "@hybridui/button/react";
import { useState } from "react";

export default function App() {
  const [loading, setLoading] = useState(false);
  const toggleLoading = () => {
    setLoading(!loading);
  };
  return (
    <>
      <HyButton loading icon="spinner">
        <span>loading</span>
      </HyButton>
      <HyButton type="primary" loading size="large" icon="spinner">
        <span>loading</span>
      </HyButton>
      <HyButton
        type="primary"
        onClick={toggleLoading}
        loading={loading}
        icon={!loading || "spinner"}
      >
        {loading ? <span>loading</span> : <span>Click Me</span>}
      </HyButton>
    </>
  );
}
Codesandbox (React example)

Disabled​

To disable a button, you can add the "disabled" property to the Button element.

PrimaryPrimary disabled
dasheddashed disabled
LinkLink disabled
texttext disabled
linklink disabled
dasheddashed disabled
primaryprimary disabled

API​

The Button component can be customized to create different button styles by setting various properties. It is recommended to set the properties in the following order: type -> shape -> size -> loading -> disabled.

PropertyDescriptionTypeDefaultVersion
blockOption to fit button width to its parent widthbooleanfalse
dangerSets the danger status of the buttonbooleanfalse
disabledSets the disabled state of the buttonbooleanfalse
hrefSets the redirect URL for a link buttonstring-
htmlTypeSets the original HTML type attribute of the button. See MDN for more information.stringbutton
iconSets the icon component for the buttonReactNode-
loadingSets the loading state of the buttonboolean | { delay: number }false
shapeSets the shape of the buttondefault | circle | rounddefault
sizeSets the size of the buttonlarge | middle | smallmiddle
targetSets the target attribute of a link button. Works only when href is specified.string-
typeSets the type of button. Available options are primary, ghost, dashed, link, text, default
onClickSet the handler to handle click event(event: MouseEvent) => void-