@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiButton

Package: @uireact/button

^v3.2.17

An actionable element, commonly used in forms

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/button

Usage a level button

We have 3 different button levels

Primary

Secondary

Tertiary

These buttons already have and uses a cohesive styling that helps improve the user experience and give clarity of their respective level.

Primary


  <UiPrimaryButton>
    Primary button
  </UiPrimaryButton>

Secondary


  <UiFlexGrid alignItems="center" gap="four">
    <UiSecondaryButton>
      Secondary button
    </UiSecondaryButton>
    <UiSecondaryButton icon>
      <UiIcon icon="UserSettings" category="secondary" />
    </UiSecondaryButton>
  </UiFlexGrid>

Tertiary


  <UiFlexGrid alignItems="center" gap="four">
    <UiTertiaryButton>
      Tertiary button
    </UiTertiaryButton>
    <UiTertiaryButton rounded size="large">
      Button
    </UiTertiaryButton>
  </UiFlexGrid>

Example

Using an UiIcon

This is simulating a disabled button that is waiting on a triggered action:


  <UiPrimaryButton disabled>
    <UiIcon icon="LoadingSpinner" category="secondary" weight="200" />
  </UiPrimaryButton>

Usage of a customizable UiButton

The UiButton allows for customization of the styling and colorations, this component can be used to create your own level components in your applications:

Button themes:


  <UiGrid cols={{ small: 1, medium: 5, large: 7, xlarge: 7 }} colsGap="three" rowsGap="three" justifyItems="center">
    <UiButton fullWidth>
      Button! 🐬
    </UiButton>
    <UiButton fullWidth category="secondary">
      Button! 🐉
    </UiButton>
    <UiButton fullWidth category="tertiary">
      Button! 🌹
    </UiButton>
    <UiButton fullWidth category="positive">
      Button! 🌎
    </UiButton>
    <UiButton fullWidth category="negative" disabled>
      Button! 🌈
    </UiButton>
    <UiButton fullWidth category="error">
      Button! ⚡️
    </UiButton>
    <UiButton fullWidth category="warning">
      Button! 🌋
    </UiButton>
  </UiGrid>

More options

These are options available to the different button components to customize their fit and finish to your use cases:

With fullWidth


  <UiGrid cols={2} rows={1} colsGap='four' justifyItems="center">
    <UiButton fullWidth>
      Button! 💅🏾
    </UiButton>

    <UiButton fullWidth category="tertiary">
      Button! 💅🏾
    </UiButton>
  </UiGrid>

As submit button


  <form>
    <UiButton category="secondary" type="submit">
      Button! 💅🏾
    </UiButton>
  </form>

Rounded button


  <UiCard weight="200" category="positive">
    <UiFlexGrid gap="three" alignItems="center">
      <UiButton rounded>
        <UiText>Button 🌜</UiText>
      </UiButton>
      <UiButton rounded styling="outlined" category="secondary">
        <UiText>Button 🍻</UiText>
      </UiButton>
      <UiButton rounded styling="clear" category="tertiary">
        <UiText>Button 📡</UiText>
      </UiButton>
    </UiFlexGrid>
  </UiCard>

Clear button


  <UiCard category="primary">
    <UiFlexGrid gap="three" alignItems="center">
      <UiButton category="tertiary" styling="clear">
        <UiText>
          Button! ✨
        </UiText>
      </UiButton>
      <UiText>Some content</UiText>
    </UiFlexGrid>
  </UiCard>

Icon button


  <UiCard weight="10">
    <UiFlexGrid gap="three" alignItems="center">
      <UiButton styling="icon" category="primary">
        <UiIcon icon="EarthAmericas" size="xlarge" />
      </UiButton>
      <UiButton styling="icon" category="secondary">
        <UiIcon icon="EarthEuropa" size="large" />
      </UiButton>
      <UiButton styling="icon" category="tertiary">
        <UiIcon icon="EarthAsia" size="regular" />
      </UiButton>
      <UiButton styling="icon" category="positive">
        <UiIcon icon="EarthAfrica" size="small" />
      </UiButton>
      <UiButton styling="icon" category="error">
        <UiIcon icon="BadgeCheck" size="xsmall" />
      </UiButton>
    </UiFlexGrid>
  </UiCard>

Outlined button


  <UiCard category="primary" weight="10">
    <UiFlexGrid gap="three">
      <UiButton styling="outlined" category="tertiary">
        <UiText>Button 🐼</UiText>
      </UiButton>
      <UiButton styling="outlined" category="secondary">
        <UiText>Button</UiText>
         <UiIcon icon="Refresh" />
      </UiButton>
      <UiButton styling="outlined" rounded category="positive">
        <UiText>Button</UiText>
        <UiIcon icon="VideoCameraVintage" />
      </UiButton>
    </UiFlexGrid>
  </UiCard>