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.
For design guidelines and all interactive states, see the Buttons design page.
The examples below assume the Cherry theme provider from Installation is already set up.
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
Button content.
Color variant of the button. Defaults to "primary".
Size of the button.
Renders the button with an outline style.
Renders the button in the theme's error color.
Makes the button span the full width of its container.
Icon element rendered inside the button.
Position of the icon relative to the label. Defaults to "left".
Native attribute. While disabled the button turns gray (grayLight background and border, gray text), shows cursor: not-allowed, and all $variant and $error styles are suppressed.
Button forwards its ref to the underlying HTMLButtonElement, and any remaining native <button> attributes pass through. The props above are typed by the exported ButtonProps interface.
buttonStyles
Button's CSS is also exported as the buttonStyles(theme, $variant, $size, $outline, $fullWidth, $error, disabled) helper, so you can style other elements to look like a Button, like a styled link:
import styled from "styled-components";
import { buttonStyles } from "cherry-styled-components";
const ButtonLink = styled.a`
${({ theme }) => buttonStyles(theme, "primary")}
`;