Button

The button component enables users to perform actions, submit forms, or navigate to a URL. It supports various styles, states, and configurations to suit different use cases

Overview

The button components can be used to perform actions, submit forms, or navigate to a URL.

The design system package exports a couple of different general purpose button components:

DsButton - A versatile button suitable for most call-to-action scenarios

DsIconButton - A compact button that relies on an icon to indicate its purpose

To organise multiple buttons in your layout, we provide the DsButtonGroup component.

Basic usage

Importing the component

To use the button component, import it from the design system package, the button styles are included as part of the theme and do not require an additional import.

Button import


                                                        
                                                        
                                                            import { DsButton } from "@coloplast/design-system";

Icon button import


                                                        
                                                        
                                                            import { DsIconButton } from "@coloplast/design-system";

Button group import


                                                        
                                                        
                                                            import { DsButtonGroup } from "@coloplast/design-system";

Example usage

Button example

Here’s an example of how to implement the button component with text added via the default slot, this will render a native <button> element:


                                                        
                                                        
                                                            <DsButton>Button text is added via a default slot</DsButton>

The button can also be used as a link by setting the href prop. The component will automatically render an <a> element for navigation when this prop is provided:


                                                        
                                                        
                                                            <DsButton href="https://example.com">Go to Example</DsButton>

Icon button example

Here’s an example of how to implement the icon button component, note that icon buttons must have an aria-label associated with them to describe what the button does, this is because there is no visible label when using an icon button:


                                                        
                                                        
                                                            <DsIconButton aria-label="Adds the product to your shopping basket" icon-name="add"></DsIconButton>

Button group example

Button groups are used to control the layout of multiple buttons, here’s how to achieve that:


                                                        
                                                        
                                                            <DsButtonGroup>
                                                            <DsButton variant="primary">The primary action</DsButton>
                                                            <DsButton variant="secondary">The secondary action</DsButton>
                                                        </DsButtonGroup>

Component playground and props

Button

To explore the button component’s props and behaviour, use the Storybook ‘Controls’ tab. You can test out different states, such as loading, by adjusting the relevant properties.

Alternatively, view the Button component in Storybook.

Open in Storybook

Loading state

For asynchronous actions, the button supports a loading state.

It's recommended that in these cases that your click handler contains the logic to prevent multiple clicks and that the button state is flipped to "loading" during this period, which will prevent any further clicks from being triggered.

Always set a loading label in these scenarios with the labelLoading prop.

Note: The loading state only applied to the primary variant of the button.

Icon button

To explore the icon button component’s props and behaviour, use the Storybook ‘Controls’ tab. You can test out different variations by adjusting the relevant properties.

Alternatively, view the Icon button component in Storybook.

Open in Storybook

Button group

To explore the button group component’s props and behaviour, use the Storybook ‘Controls’ tab. You can test out different variations by adjusting the relevant properties.

Alternatively, view the Button group component in Storybook.

Open in Storybook

Accessibility

Accessible name

Always provide a clear, accessible name by adding text inside the default slot for buttons, and by specifying an aria label on the icon buttons, this ensures that assistive technology can communicate the purpose of the button.

Button types

Ensure you're using the appropriate button type for each context:

type="button": No default behaviour, add custom behaviour via JS.

type="submit": Used for submitting forms.

type="reset": Resets form values.

href="...": Converts the button to a navigational link.

Colour accessibility

Known issue

The primary CTA button currently has insufficient contrast, we hope to find a solution in the near future.

A high-contrast theme is available for users who have high contrast settings enabled in their operating systems. This theme ensures better visibility of buttons for those users.

Internationalisation

Right-to-left support

The button component supports right-to-left (RTL) languages.

Icons with a directional component to them may become mirrored in right-to-left languages, always verify that directional icons make sense in their particular context.

Long text support

The button is designed to handle long text labels without breaking the layout.

SEO

Ensure that when using the button for linking to content, that you use meaningful text for the link, avoid using generic labels like “Read more”, particularly if there are multiple buttons with the same label.

Use server rendering where possible, e.g. if you need a CTA on a promotional block, favour using server rendered markup and an anchor element over mounting a component.