Import
import { Button } from '@contentful/f36-components';// orimport { Button } from '@contentful/f36-button';
Examples
Variants
Button has 5 different variants:
- Primary - Used for the most important actions in any scenario. Don’t use more than one primary button in a section or screen to avoid overwhelming users.
- Secondary - Used for secondary actions, the most commonly used button type.
- Positive - For use when the action has a positive connotation such as creating or publishing a new entity.
- Negative - For destructive actions - when something can't be undone. For example, deleting entities.
- Transparent - For having an unstyled button. Use this only on light backgrounds.
Sizes
Button has 3 different sizes:
States
Full width
Rendered as a
tag
By default, button is rendered as a button
tag. But you can change it to a
tag, by providing as
prop. Don't forget to pass href
prop as well.
With icons
You can add an icon by providing the following props:
startIcon
- adds icon to the left side of the buttonendIcon
- adds icon to the right side of the button
The variant
prop of the icon is automatically adjusted based on the variant
of the button. If you are using a button with variant="transparent"
you can also set the icon variant manually.
Props (API reference)
Open in StorybookName | Type | Default |
---|---|---|
as | HTML Tag or React Component (e.g. div, span, etc) The element used for the root node. | button |
children | ReactNode | |
className | string CSS class to be appended to the root element | |
endIcon | ReactElement<any, string | JSXElementConstructor<any>> Expects any of the icon components. Renders the icon aligned to the end | |
isActive | false true Applies active styles | false |
isDisabled | false true Disabled interaction and applies disabled styles | false |
isFullWidth | false true Forces button to take 100% of the container | |
isLoading | false true Adds loading indicator icon and disables interactions | |
size | "small" "medium" "large" Determines size variation of Button component | medium |
startIcon | ReactElement<any, string | JSXElementConstructor<any>> Expects any of the icon components. Renders the icon aligned to the start | |
testId | string A [data-test-id] attribute used for testing purposes | |
variant | "negative" "positive" "primary" "secondary" "transparent" Determines style variation of Button component | secondary |
Content guidelines
- Don't use more than one primary button in a section or screen to avoid overwhelming users.
- Start labels with action verbs. If the button is part of an action dialog, make sure it matches the dialog header.
- Position buttons in consistent places in the interface
- Use the right button for the primary action, if the button group is right-aligned
- Use the left button for the primary action, if the button group is left- or center-aligned
- Reduce complexity by using a small number of actions. Too many actions can create confusion when having to decide
- For buttons that are used to cancel destructive actions: label them "Never mind" or similar, instead of cancel. It makes things much easier for users to understand.
- UI usage - Button labels should be no longer than 3 words
- Webpage usage - Button labels should be no longer than 5 words
Accessibility
- When Button is focused, both the Space and Enter keys will activate the button.
- All Button variants are checked in terms of color contrast and passed all the requirements.
- Buttons have a focus state when using keyboard navigation.