The Button Dock 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

count

direction

vertical

horizontal

vertical

2. Count

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

Image 2.1 : Count 1

Image 2.2 : Count 2

3. Direction

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

Image 3.1 : Direction vertical

Image 3.2 : Direction horizontal

SwiftUI

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
}

Jetpack Compose

The ButtonDock 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

count

ButtonCount.one

ButtonCount.two

ButtonCount.one

direction

ButtonDockDirection.vertical

ButtonDockDirection.horizontal

ButtonDockDirection.vertical

firstButtonTitle

"text"

secondButtonTitle

"text"

firstButtonClick

secondButtonClick

2. Count

You can edit the count with the ButtonCount.one or ButtonCount.two parameter.

Button
Button
Button
ButtonDock(
count = ButtonCount.one,
firstButtonTitle = "Button",
firstButtonClick = {}
)

ButtonDock(
count = ButtonCount.two,
direction = ButtonDockDirection.vertical,
firstButtonTitle = "Button",
firstButtonClick = {},
secondButtonTitle = "Button",
secondButtonClick = {}
)

3. Direction

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

Button
Button
Button
Button
ButtonDock(
count = ButtonCount.two,
direction = ButtonDockDirection.horizontal,
firstButtonTitle = "Button",
firstButtonClick = {},
secondButtonTitle = "Button",
secondButtonClick = {}
)

ButtonDock(
count = ButtonCount.two,
direction = ButtonDockDirection.vertical,
firstButtonTitle = "Button",
firstButtonClick = {},
secondButtonTitle = "Button",
secondButtonClick = {}
)

React Native

The CustomButtonDock 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

firstButton

secondButton

firstButton

direction

vertical

horizontal

vertical

text

"text"

type

primary

secondary

tertiary

ghost

primary

2. Type

You can edit the type with the firstButton or secondButton parameter.

Primary
Primary
Secondary
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import CustomButton from '../../components/common/CustomButton';
import CustomButtonDock from '../../components/common/CustomButtonDock';

export default function ScreenName() {
return (
<View style={styles.screen}>
<Text>Example Screen</Text>

<CustomButtonDock
direction="vertical"
firstButton={
<CustomButton
text="Primary"
type="primary"
/>}
/>

<CustomButtonDock
direction="vertical"
firstButton={
<CustomButton
text="Primary"
type="primary"
/>}
secondButton={
<CustomButton
text="Secondary"
type="secondary"
/>}
/>
‍
</View>
);
}

3. Direction

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

Primary
Secondary
Primary
Secondary
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import CustomButton from '../../components/common/CustomButton';
import CustomButtonDock from '../../components/common/CustomButtonDock';

export default function ScreenName() {
return (
<View style={styles.screen}>
<Text>Example Screen</Text>

<CustomButtonDock
direction="horizontal"
firstButton={
<CustomButton
text="Primary"
type="primary"
/>}
secondButton={
<CustomButton
text="Secondary"
type="secondary"
/>}
/>

<CustomButtonDock
direction="vertical"
firstButton={
<CustomButton
text="Primary"
type="primary"
/>}
secondButton={
<CustomButton
text="Secondary"
type="secondary"
/>}
/>

</View>
);
}

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Premium Version