Skip to main content

Button


Introduction​

A button is a specific type of user interface element used in web development to provide interactivity and trigger actions when clicked or activated. It is a graphical element that is typically styled with visual cues to indicate its purpose and can be customized to fit the overall design system of a website or application.

Buttons are essential components of a button design system and are used for various purposes such as submitting a form, navigating between pages, triggering specific functions or operations, and providing calls to action for users. They can be designed with different sizes, shapes, colors, and styles to create visual hierarchy and convey different levels of importance or urgency.

Button design systems help maintain consistency and coherence throughout a website or application by providing a set of predefined styles, guidelines, and components for creating buttons. This ensures that buttons across different pages and sections of the interface have a unified look and feel, enhancing the overall user experience and promoting intuitive interaction.


Import Button​

To call technotic's Button component, you can use the following code:

import { Button } from 'technotic';

<Button>[Text/element U want to insert]</Button>

Default Button Usage​


<Button>[Text U want to insert]</Button>

Button Customization​

Button Size​

There are 3 sizes of BNCC Button, which are:

  • small

<Button btnSize="small">
    Small
</Button>

  • medium

<Button btnSize="medium">
    Medium
</Button>

  • large

<Button btnSize="large">
    Large
</Button>

Button type​

There are 4 type of BNCC Button, which are:

  • primary

<Button btnType="primary">
    Primary
</Button>

  • secondary

<Button btnType="secondary">
    Secondary
</Button>

  • link

<Button btnType="link">
    Link
</Button>

  • disabled

    1. Primary


      <Button btnType="primary" disabled>
          Primary Disabled
      </Button>

    2. Secondary


      <Button btnType="secondary" disabled>
          Secondary Disabled
      </Button>

    3. Link


      <Button btnType="link" disabled>
          Disabled
      </Button>

Button Color on every type​

Example of every button types of BNCC Button can be colorized, which are: used:

btnColor="[your color]"

  • Primary Button, Secondary Button, Link Button (Red)

<Button btnType="primary" btnColor="red">
    Primary
</Button>
<Button btnType="secondary" btnColor="red">
    Secondary
</Button>
<Button btnType="link" btnColor="red">
    Link
</Button>

a. if u want to redirect link to another page in different domain by using:

from react u can redirect link to another page domain by using:

<Button btnType="link" link="https://www.youtube.com/">Link</Button>

from react u can redirect link to another page in same domain, like this one:

// import element u want to redirect
import { Configuration } from '../../configuration/Configuration.mdx';

<Button btnType="link" link="/docs/configuration/#commands" element={<Configuration/>}>
    Link
</Button>

Summary​

Well done! You've learned about your button component, and how to use it with any configuration.