Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Button

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Interactive element that, upon being pressed, triggers a specific action.

import { Button } from '@kubit-ui-web/react-components'
1
<Button variant="PRIMARY" size="LARGE">Button</Button>

Variants

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified, or new ones can be added to align with the specific requirements of each project.

We have set predefined styles for quick use. Access them through the variant prop:

123
<Button variant="PRIMARY" size="LARGE">PRIMARY</Button>
<Button variant="SECONDARY" size="LARGE">SECONDARY</Button>
<Button variant="SECONDARY_ALT" size="LARGE">SECONDARY_ALTERNATIVE</Button>

Sizes

Some of the props are being deprecated and they will be removed in the version 2.0.0:

  • Button's size MEDIUM will be removed. In the next major, to have the same style and behavior, use LARGE.

Kubit offers predefined sizes enhancing the hierarchy of buttons. It can be customized through the theme.

Some of the props are being deprecated and they will be removed in the version 2.0.0:

  • Button's size MEDIUM will be removed. In the next major, to have the same style and behavior, use LARGE.
123
<Button variant="PRIMARY" size="SMALL">BUTTON SMALL</Button>
<Button variant="PRIMARY" size="LARGE">BUTTON MEDIUM</Button>
<Button variant="PRIMARY" size="LARGE">BUTTON LARGE</Button>

Loading

Set the loading prop to inform users that an action is in progress. Additionally, use the loader prop to inform about the variant used in the loader component.

123
<Button variant="PRIMARY" size="LARGE" loading={true} loader={{ variant: 'PRIMARY_WHITE', altText: 'loaderAltText' }}>
  BUTTON
</Button>

Disabled

Use the disabled prop to inform users that no interaction is allowed in this moment.

1
<Button variant="PRIMARY" size="LARGE" disabled={true}>DISABLED</Button>

Icon

Option icon + text button:

You can enhance the component by adding an icon using the icon prop. Furthermore, you have the option to adjust its position using the iconPosition prop.

Additionally, you can utilize the button solely with an icon, omitting the need for text, by not providing the children prop.

12
<Button variant="PRIMARY" size="LARGE" icon={{ icon: "ICON_PLACEHOLDER" }}>BUTTON</Button>
<Button variant="PRIMARY" size="LARGE" icon={{ icon: "ICON_PLACEHOLDER" }}/>

Full Width

Set the prop fullWidth to maximize the button's width, which will adjust according to its parent element.

1
<Button variant="PRIMARY" size="LARGE" fullWidth={true}>BUTTON FULL WIDTH</Button>
ComponentsOverview
ButtonDesign Specs