Button - Develop

Buttons are essential components in web development, frequently used for user interactions. In this guide, we’ll explore various button variations and their associated properties.

Keep in mind that the <button> element inherently includes native browser properties like onClick. Additionally, Cherry UI components introduce custom properties that always begin with a $ to distinguish them from native component 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.

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

export default function Page() {
  return <Button $variant="secondary">Button</Button>;
}

You can try more variations and props like $outline.

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

export default function Page() {
  return <Button $variant="secondary">Button</Button>;
}

Properties

Explore the source code on GitHub: