Button

Buttons are the way a user can interact with a website and make actions.

They are necessary for your interface, so the user can execute actions and start processes with a single click or tap. It also add interactivity to your application.

Basic implementation

To start using the button component, you just need to import it and render it inside your React component.

basic-component.tsx
    
       
 import { Button } from "cloth-ui"; 
 
 export const QuickStart = () => { 

  return <Button variant="primary" text="Hello World!" icon={Icon} /> 
 };

Style Variants

The button component currently has three variants, which you can change specifying the variant attribute.

variant-component.tsx
    
       
 import { Button } from "cloth-ui"; 
 
 export const VariantComponent = () => { 

  return ( 

    <> 

      <Button variant="primary" text="Variant 1" /> 

      <Button variant="secondary" text="Variant 2" /> 

      <Button variant="secondaryAlt" text="Variant 3" /> 

    </> 

  ); 
 };

Disabled Buttons

The button component has an attribute to set it disabled. It can be alterned between disabled and enabled states using React hooks.

disabled-component.tsx
    
       
 import { Button } from "cloth-ui"; 
 
 export const DisabledComponent = () => { 

  return ( 

    <> 

      <Button variant="primary" text="Variant 1" disabled /> 

      <Button variant="secondary" text="Variant 2" disabled /> 

      <Button variant="secondaryAlt" text="Variant 3" disabled /> 

    </> 

  ); 
 };

Icons and Position

The component also allows to add an icon to it, as an svg. It can also be specified which side is going to be set; either to the left or the right side.

By default, when an icon is passed to the component, it is going to be set on the left side of the button. You can specify the position using the iconPosition attribute.

icons-component.tsx
    
       
 import { Button } from "cloth-ui"; 
 import Icon from "./icon"; 
 
 export const IconsComponent = () => { 

  return ( 

    <> 

      <Button variant="primary" text="Icon Button" icon={Icon} /> 

      <Button variant="primary" text="Icon Button" icon={Icon} iconPosition="right" /> 

    </> 

  ); 
 };

Button Type

The button type can also be specified; having button, reset and submit types.

By default, it is set to "button" type, but you can specify a different type in case you are working with forms by using the buttonType attribute.

types-component.tsx
    
       
 import { Button } from "cloth-ui"; 
 
 export const TypesComponent = () => { 

  return ( 

    <> 

      <Button variant="primary" text="Button" buttonType="button" /> 

      <Button variant="primary" text="Reset" buttonType="reset" /> 

      <Button variant="primary" text="Submit" buttonType="submit" /> 

    </> 

  ); 
 };

OnClick Actions

For various reasons, the button needs to execute a function everytime is pressed. You can pass a function to the component using the onClick attribute.

Note that if the button is disabled, the function will not be executed when is pressed.

function-component.tsx
    
       
 import { Button } from "cloth-ui"; 
 
 const MyFunction = () => { 

  console.log("Hello World!"); 
 }; 
 
 // The disabled Button component won't execute "MyFunction" 
 export const FunctionComponent = () => { 

  return ( 

    <> 

      <Button variant="primary" text="Enabled" onClick={MyFunction} /> 

      <Button variant="primary" text="Disabled" disabled onClick={MyFunction} /> 

    </> 

  ); 
 };