Dialog-Actions

Info

What does the component do?

It is part of the dialog component.

When should the component be used?

Only within the dialog component.

Parent Components

Dialog

Anatomy

Number	Type	Description	Optional	Info
1	Component	`sbb-dialog-title`	No
1a	Component	`sbb-secondary-button`	Yes	Back-Button
1b	Component	`sbb-secondary-button`	No
1c	Component	`sbb-secondary-button`	Yes	Close-Action
2	Component	`sbb-title`	No
2a	Slot	Beliebiger Inhalt erlaubt	No
3	Component	`sbb-dialog-actions`	Yes
3a	Component	`sbb-secondary-button`	Yes	Auch Block-Links sind erlaubt
3b	Component	`sbb-button`	Yes	Auch Block-Links sind erlaubt

Implementation

The sbb-dialog-actions component extends the sbb-action-group component. Use it in combination with the sbb-dialog to display a footer with an action group.

<sbb-dialog>
  <sbb-dialog-actions>
    <sbb-block-link sbb-dialog-close>Link</sbb-block-link>
    <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
    <sbb-button sbb-dialog-close> Confirm </sbb-button>
  </sbb-dialog-actions>
</sbb-dialog>

Properties

Name	Attribute	Privacy	Type	Default	Description
`alignGroup`	`align-group`	public	`'start' \| 'center' \| 'stretch' \| 'end'`	`'start'`	Set the slotted `<sbb-action-group>` children's alignment.
`buttonSize`	`button-size`	public	`SbbButtonSize`	`'l'`	Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances.
`horizontalFrom`	`horizontal-from`	public	`SbbHorizontalFrom`	`'medium'`	Overrides the behaviour of `orientation` property.
`linkSize`	`link-size`	public	`SbbLinkSize`	`'m'`	Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances.
`orientation`	`orientation`	public	`SbbOrientation`	`'horizontal'`	Indicates the orientation of the components inside the `<sbb-action-group>`.

Slots

Name	Description
	Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-dialog-actions`.