Button: React
Buttons indicate possible actions or choices to a user.
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { Button } from '@mediahuis/chameleon-react';
export default function Example() {
return <Button>Example</Button>;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
appearance | 'default' | 'primary' | 'secondary' | 'tertiary' | 'default' | No | Controls the button's visual style. |
disabled | Boolean | - | No | Indicates whether the button is disabled or not. |
iconLeft | SVGType | - | No | The icon on the left side of the button. It extends the Icon component and accepts one of the icons from the icons package. |
iconRight | SVGType | - | No | The icon on the right side of the button. It extends the Icon component and accepts one of the icons from the icons package. |
loading | Boolean | - | No | Enables or disables the loading state of the button. It also disables the button while in the loading state. |
size | 'sm' | 'lg' | 'lg' | No | Changes the visual size of the BrandedHeading. |
width | 'auto' | 'full' | 'auto' | No | Controls the button's width property. |
as
You can use the as prop to create links that look like a Button. Please, don't wrap them with an a tag.
<Button as="a" href="#">
I'm a link
</Button>