The DLButtonDock is a customizable component designed to display one or more buttons visible on screen at all times. This allows users to quickly decide and act at any moment without having to scroll to the very end of a page.

1. Reference

This component inherits props from the Button Dock.

Prop

Type

Default

type

.singleButton

.doubleHorizontalButtons

.doubleVerticalButtons

.singleButton

firstButtonTitle

"text"

secondButtonTitle

"text"

firstButtonAction

secondButtonAction

2. Type

You can edit the count with the .1 or .2 parameter.

Button
Button
Button
DLButtonDock(
type: .singleButton
(firstButtonTitle: "Button"),
firstButtonAction:  {
/// - Save Action
})

DLButtonDock(
type: .doubleVerticalButtons
(firstButtonTitle: "Button",
secondButtonTitle: "Button")) {
/// - Action
} secondButtonAction: {
/// - Action
}

3. Direction

You can edit the direction with the .vertical or .horizontal parameter.

Button
Button
Button
Button
DLButtonDock(
type: .doubleHorizontalButtons
(firstButtonTitle: "Button",
secondButtonTitle: "Button")) {
/// - Action
} secondButtonAction: {
/// - Action
}

DLButtonDock(
type: .doubleVerticalButtons
(firstButtonTitle: "Button",
secondButtonTitle: "Button")) {
/// - Action
} secondButtonAction: {
/// - Action
}

Preview

Code

Primary

DLButtonDock(
  buttons: [
    DLButton(
      label: 'Button',
      type: DLButtonType.primary,
      onPressed: () {},
    ),
  ],

Copy

Usage

Add this code example to your project to see how the component works.

DLButtonDock(
  buttons: [
    DLButton(
      label: 'Button',
      type: DLButtonType.primary,
      onPressed: () {},
    ),
  ],

Copy

Examples

Variants

Preview

Code

Button

DLButtonDock(
  buttons: [
    DLButton(
      label: 'Button',
      type: DLButtonType.primary,
      onPressed: () {},
    ),
    DLButton(
      label: 'Button',
      type: DLButtonType.secondary,
      onPressed: () {},
    ),
  ],
  direction: Axis.vertical,
  showSeparator: true,
);

Copy

Size

Preview

Code

Button

DLButtonDock(
  buttons: [
    DLButton(
      label: 'Button',
      type: DLButtonType.secondary,
      onPressed: () {},
    ),
    DLButton(
      label: 'Button',
      type: DLButtonType.primary,
      onPressed: () {},
    ),
  ],
  direction: Axis.horizontal,
  horizontalSplitEvenly: true,
  showSeparator: true,
);

Copy

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version