Button

Buttons are essential components in web development, frequently used for user interactions.

Keep in mind that the <button> element inherently includes native browser properties like onClick. Cherry UI components introduce custom properties that always begin with a $ to distinguish them from native props.

import React from "react";
import { Button } from "cherry-styled-components";

export default function Page() {
  return <Button>Button</Button>;
}

You can change the look of your button by adding a $variant prop:

<Button $variant="secondary">Button</Button>

You can try more variations and props like $outline:

<Button $variant="tertiary" $outline>Button</Button>

Properties