Button

Buttons allow users to take actions, and make choices, with a single tap.

Props

Props	Type	Required	Description
children	string	Yes	The label of the button
onClick	function() => void	Yes	If you want to do something on button click, then you can do it by passing the onClick function
style	object	No	A style object that can be used to style the button
type	string	No	The Button component provides 2 types of buttons. By default the button rendered will be a secondary button. If you want to render a primary button, then you can pass the value fill to the type prop.

http://localhost:3000

Primary

Secondary

src/components/ExampleButton/index.tsx

import React from "react";
import { Button } from "canary-design";

const ExampleButton = () => {
  const buttonsContainerStyle: React.CSSProperties = {
    marginTop: "1rem",
    display: "flex",
    gap: "0.8rem",
    padding: 5,
  };

  return (
    <div style={buttonsContainerStyle}>
      <Button type="fill" onClick={() => alert("Canary Design is awesome!")}>
        Primary
      </Button>
      <Button onClick={() => alert("Canary Design is awesome!")}>
        Secondary
      </Button>
    </div>
  );
};

export { ExampleButton };