Button

The Button component provides multiple customisations like colors, elevaion and size.

Default Button

import React from "react";
import { Button } from "shoto-ui";

function ButtonCustom() {
  return (
    <Button>Button</Button>
  );
}

Sizes

You can choose from three sizes - small, mediem, large. Medium is the default size.

import React from "react";
import { Button } from "shoto-ui";

function ButtonCustom() {
  return (
        <div>
			<Button size="small">Small</Button>
			<Button size="medium">Medium</Button>
			<Button size="large">Large</Button>
        </div>
  );
}

Button onClick

Button onClick works as in a normal button.

import React from "react";
import { Button } from "shoto-ui";

function ButtonCustom() {
  return (
    <Button onClick={() => alert("Button Clicked")}>Click Me</Button>
  );
}

Disabled Button

import React from "react";
import { Button } from "shoto-ui";

function ButtonCustom() {
  return (
    <Button disabled>DISABLED</Button>
  );
}

Rounded Button

import React from "react";
import { Button } from "shoto-ui";

function ButtonCustom() {
  return (
    <Button rounded>Rounded Button</Button>
  );
}

Elevated Button

import React from "react";
import { Button } from "shoto-ui";

function ButtonCustom() {
  return (
    <Button elevated>Elevated Button</Button>
  );
}

Customising Colors

Both text and background colors are customisable through props.

import React from "react";
import { Button } from "shoto-ui";

function ButtonCustom() {
  return (
    <Button size="large" bgColor="rgb(29, 161, 242)" textColor="#fff" rounded>Custom colors</Button>
  );
}

Icon Button

import React from "react";
import { Button } from "shoto-ui";
import { OutlinePlus } from "./assets/icons";

function ButtonCustom() {
  return (
    <Button size="large" type="icon"><OutlinePlus/></Button>
  );
}