Button
The <Button> is a common form component, that renders a button element, which allows users to perform an action.
They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
The variant and size of the <Button> can be added with the variant prop. You can also set the size, currently there is just one size available.
Import
import { Button } from '@marigold/components';Appearance
| Property | Type | Description |
|---|---|---|
variant | primary | link | text | icon | The available variants of this component. |
size | small | The available sizes of this component. |
Props
| Property | Type | Default | Description |
|---|---|---|---|
onPress | (e: PressEvent) => void | none | Handler that is called when the press is released over the target. |
disabled | boolean | false | Disables the button. |
fullWidth | boolean | false | Stretches the button width with full available space. |
... | | - | Yes you can use all regular attributes of button! |
Examples
Primary Button
The function of the primary <Button> is to achieve the most common or most important goal of the user, it has more visual weight than the secondary <Button>. There should not be more than one primary <Button> in a screen at the time.
Secondary Button
The Secondary <Button> is an alternative to the user to the primary <Button>. They are used for actions like canceling, skipping, resetting, declining an offer etc.
Ghost Button
Ghost <Button> are used for miscellaneous actions, they are important but is not the ones where it is desired that the user focus at the moment.
Suplementary Text Button
The only text <Button> can be used in a similar way of a secondary <Button>, but they are meant to be less relevant to the user. It is also a good way if you want a <Button> that don't really look like one.
Button with Icon
Icons can be added in order to make clear, what a <Button> does. Buttons should not be made only with icons, because every user may understand them on a different way. If you want to have simple icon with a <Tooltip> you can choose a <Button> with an icon.
Button Sizes
If there are many actions in one page, is it possible to use small buttons instead of big ones. As well if the page is required to be open on mobile devices.
Also there is the fullWidth property, with that one you can stretch the width of the <Button>.
Button as a Link
Sometimes you want to use an <a> tag, instead of a <button>, but you still want it to look and behave like a button. This might be the case when you want the user to enable to download a file that is already available via URL. Instead of loading the file on click, you can make use of the [download] attribute.
To make this possible, Marigold's <Button> component allows to change the rendered element by using the as prop, similiar to the <Box> component.