ButtonGroup

The ButtonGroup component is used to group buttons together and apply specified Button properties unilateraly.

Import

React

// with @dhl-official/react-library:
import { DhlButtonGroup } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlButtonGroup } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-button-group></dhl-button-group>

Vue.js

// with @dhl-official/vue-library:
import { DhlButtonGroup } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlButtonGroup } from "@dhl-official/ui-libraries/vue-library"

Usage

The ButtonGroup component acts as the parent of its respective Button children. Buttons within a ButtonGroup will inherit the

• size
• variant
• isDisabled
• props from the ButtonGroup. The children Buttons override said props if specified within the scope of the Button.

Code

React

<DhlButtonGroup>
  <DhlButton clickEvent={() => {}} variant="DHL_BUTTON.VARIANT.PRIMARY">Submit</DhlButton>
  <DhlButton clickEvent={() => {}} variant="DHL_BUTTON.VARIANT.OUTLINE">Clear</DhlButton>
</DhlButtonGroup>

Angular

<dhl-button-group>
  <dhl-button [clickEvent]="clickEvent" [variant]="DHL_BUTTON.VARIANT.PRIMARY">Submit</dhl-button>
  <dhl-button [clickEvent]="clickEvent" [variant]="DHL_BUTTON.VARIANT.OUTLINE">Clear</dhl-button>
</dhl-button-group>

Vue.js

<dhl-button-group>
  <dhl-button :clickEvent.prop="() => {}" variant="DHL_BUTTON.VARIANT.PRIMARY">Submit</dhl-button>
  <dhl-button :clickEvent.prop="() => {}" variant="DHL_BUTTON.VARIANT.OUTLINE">Clear</dhl-button>
</dhl-button-group>

Changelog

v2.4.1-monorepo.8

Breaking changes

• Deprecating isBlock property.
• Add isFullWidth property - sets the ButtonGroup container to 100% width of the parent container.

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
dataAriaLabel	data-aria-label	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.	string	undefined
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-button-group-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
isBlock	is-block	[DEPRECATED] An optional prop that sets whether the component inherits the width of it's container. Any Button which directly specifies their isBlock prop will get overridden by the value of the same named prop of this component.	boolean	false
isDisabled	is-disabled	An optional flag to define if the component is disabled. Any Button which directly specifies their isDisabled prop will override the disabled state set by ButtonGroup.	boolean	false
isFullWidth	is-full-width	An optional prop that sets the component to 100% width of it's parent container. Any Button which directly specifies their isFullWidth prop will get it overridden by the value of the same named prop of this component.	boolean	false
orientation	orientation	An optional orientation prop for the ButtonGroup component.	"horizontal" \| "vertical"	DHL_BUTTON_GROUP.ORIENTATION.HORIZONTAL
size	size	An optional size prop for the component. Any Button which directly specifies their size prop will be overridden by the value of the size prop of this component.	"md" \| "sm" \| "xs"	DHL_BUTTON_GROUP.SIZE.MD
variant	variant	An optional prop to select a component design variant for all Buttons within the ButtonGroup. Any Button which directly specifies their variant prop will override the variant set by ButtonGroup.	"outline" \| "primary" \| "text"	DHL_BUTTON_GROUP.VARIANT.PRIMARY

Slots

Slot	Description
"unnamed"	unnamed children slot intended for multiple DhlButton components

---

Built by DHL User Interface Library Team!