# Button
> Cherry Button component - primary, secondary, and tertiary variants, sizes, and outline mode.
Source: https://cherry.al/code/button
# Button
Buttons are essential components in web development, frequently used for user interactions.
Keep in mind that the `` 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](/buttons) design page.
The examples below assume the Cherry theme provider from [Installation](/code/installation) is already set up.
```jsx
import React from "react";
import { Button } from "cherry-styled-components";
export default function Page() {
return Button ;
}
```
You can change the look of your button by adding a `$variant` prop:
```html
Button
```
You can try more variations and props like `$outline`:
```html
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 `` 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:
```tsx
import styled from "styled-components";
import { buttonStyles } from "cherry-styled-components";
const ButtonLink = styled.a`
${({ theme }) => buttonStyles(theme, "primary")}
`;
```
View Source