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>;
}
Property | Description |
---|---|
children? | React.ReactNode |
$variant? | "primary" | "secondary" | "tertiary" |
$size? | "default" | "big" |
$outline? | boolean |
$fullWidth? | boolean |
theme? | Theme |
Explore the source code on GitHub: