Dynamic Layer

v5.1

What's new

Changelog

Roadmap

Templates

Product

Brand

Design Tokens

Button

PRO

You can edit 8 Components for free. Get premium for unlimited access.

Displays a button or a component that looks like a button.

Figma

The Button is a customizable component designed to display a mini, small, medium or large button with different styles and background colors.

1. Reference

This component inherits props from the Button.

Prop

Type

Default

type

primary

secondary

tertiary

ghost

primary

size

state

default

pressed

active

disabled

default

iconLeft

true

false

iconRight

true

false

label

required

2. Type

You can edit the type with the primary, secondary, tertiary or ghost parameter.

Image 2.1 : Type primary

Image 2.2 : Type secondary

Image 2.3 : Type tertiary

Image 2.4 : Type ghost

3. Size

You can edit the size with the xs, sm, md or lg parameter.

Image 3.1 : Size lg

Image 3.2 : Size md

Image 3.3 : Size sm

Image 3.4 : Size xs

4. State

You can edit the state with the default, pressed, active and disabled parameter.

Image 4.1 : State default

Image 4.2 : State pressed

Image 4.3 : State active

Image 4.4 : State disabled

5. iconLeft

You can edit the iconLeft with the true or false parameter.

Image 5.1 : iconLeft false

Image 5.2 : iconLeft true

6. iconRight

You can edit the iconRight with the true or false parameter.

Image 6.1 : iconRight false

Image 4.2 : iconRight true

SwiftUI

The DLButton is a highly customizable button component in SwiftUI, supporting various sizes, styles, and actions for easy integration into your app's UI.

1. Reference

This component inherits props from the Button.

Prop

Type

Default

type

.primary

.secondary

.tertiary

.ghost

.primary

size

.xs

.sm

.md

.lg

state

.normal

.disabled

.normal

width

label

"label"

icon

"icon"

isPackageIcon

button action

false

action

button action

2. Type

You can edit the type with the .primary, .secondary, .tertiary or .ghost parameter.

Button
Button
Button
Button
DLButton(
size: .lg,
type: .primary,
label: "Button",
icon: ("", "")
)

DLButton(
size: .lg,
type: .secondary,
label: "Button",
icon: ("", "")
)

DLButton(
size: .lg,
type: .tertiary,
label: "Button",
icon: ("", "")
)

DLButton(
size: .lg,
type: .ghost,
label: "Button",
icon: ("", "")
)

3. Size

You can edit the size with the .xs, .sm, .md or .lg parameter.

Button
Button
Button
Button
DLButton(
size: .lg,
type: .primary,
label: "Button",
icon: ("", "")
)

DLButton(
size: .md,
type: .secondary,
label: "Button",
icon: ("", "")
)

DLButton(
size: .sm,
type: .tertiary,
label: "Button",
icon: ("", "")
)

DLButton(
size: .xs,
type: .ghost,
label: "Button",
icon: ("", "")
)

4. State

You can edit the state state with .normal or .disabled parameter.

Button
Button
Button
Button
DLButton(
size: .lg,
type: .primary,
label: "Button",
state: .disabled,
icon: ("", "")
)

DLButton(
size: .lg,
type: .secondary,
label: "Button",
state: .disabled,
icon: ("", "")
)

DLButton(
size: .lg,
type: .tertiary,
label: "Button",
state: .disabled,
icon: ("", "")
)

DLButton(
size: .lg,
type: .ghost,
label: "Button",
state: .disabled,
icon: ("", "")
)

5. Icon

You can edit the icon with the "icon" parameter.

Button
Button


DLButton(
size: .lg,
type: .primary,
label: "Button",
icon: ("ic_Placeholder", "")
)

DLButton(
size: .lg,
type: .primary,
label: "Button",
icon: ("", "ic_Placeholder")
)

Jetpack Compose

The Button is a highly customizable button component in Kotlin, supporting various sizes, styles, and actions for easy integration into your app's UI.

1. Reference

This component inherits props from the Button.

Prop

Type

Default

type

ButtonType.primary

ButtonType.secondary

ButtonType.tertiary

ButtonType.ghost

ButtonType.primary

size

ButtonSize.xs

ButtonSize.sm

ButtonSize.md

ButtonSize.lg

state

ButtonState.default

ButtonState.disabled

ButtonState.default

iconLeft

ButtonIcon

iconRight

ButtonIcon

label

"label"

onClick

2. Type

You can edit the type with the ButtonType.primary, ButtonType.secondary, ButtonType.tertiary or ButtonType.ghost parameter.

Button
Button
Button
Button
Button(
label = "Button",
size = ButtonSize.lg,
type = ButtonType.primary,
onClick = { }
)

Button(
label = "Button",
size = ButtonSize.lg,
type = ButtonType.secondary,
onClick = { }
)

Button(
label = "Button",
size = ButtonSize.lg,
type = ButtonType.tertiary,
onClick = { }
)

Button(
label = "Button",
size = ButtonSize.lg,
type = ButtonType.ghost,
onClick = { }
)

3. Size

You can edit the size with the .xs, .sm, .md or .lg parameter.

Button
Button
Button
Button
Button(
label = "Button",
size = ButtonSize.lg,
type = ButtonType.primary,
onClick = { }
)

Button(
label = "Button",
size = ButtonSize.md,
type = ButtonType.primary,
onClick = { }
)

Button(
label = "Button",
size = ButtonSize.sm,
type = ButtonType.primary,
onClick = { }
)

Button(
label = "Button",
size = ButtonSize.xs,
type = ButtonType.primary,
onClick = { }
)

4. State

You can edit the state state with ButtonState.default or ButtonState.disabled parameter.

Button
Button
Button
Button
Button(
label = "Button",
size = lg,
type = ButtonType.primary,
state = ButtonState.disabled,
onClick = { }
)

Button(
label = "Button",
size = lg,
type = ButtonType.secondary,
state = ButtonState.disabled,
onClick = { }
)

Button(
label = "Button",
size = lg,
type = ButtonType.tertiary,
state = ButtonState.disabled,
onClick = { }
)

Button(
label = "Button",
size = lg,
type = ButtonType.ghost,
state = ButtonState.disabled,
onClick = { }
)

5. Icon

You can edit the iconLeft and iconRight with the ButtonIcon parameter.

Button
Button


Button(
label = "Button",
size = ButtonSize.lg,
type = ButtonType.primary,
iconLeft = ButtonIcon.Drawable(R.drawable.ic_crop),
onClick = { }
)

Button(
label = "Button",
size = ButtonSize.lg,
type = ButtonType.primary,
iconRight = ButtonIcon.Drawable(R.drawable.ic_crop),
onClick = { }
)

Preview

Code

Button

DLButton(
  type: DLButtonType.primary,
  size: DLButtonSize.lg,
  label: 'Button',
  onPressed: () {},
);

Copy

Usage

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

DLButton(
  type: DLButtonType.primary,
  size: DLButtonSize.lg,
  label: 'Button',
  onPressed: () {},
);

Copy

Examples

Variants

Preview

Code

Primary

Secondary

Tertiary

Ghost

DLButton(
  type: DLButtonType.primary,
  size: DLButtonSize.lg,
  label: 'Button',
  onPressed: () {},
),
DLButton(
  type: DLButtonType.secondary,
  size: DLButtonSize.lg,
  label: 'Button',
  onPressed: () {},
),
DLButton(
  type: DLButtonType.tertiary,
  size: DLButtonSize.lg,
  label: 'Button',
  onPressed: () {},
),
DLButton(
  type: DLButtonType.ghost,
  size: DLButtonSize.lg,
  label: 'Button',
  onPressed: () {},
);

Copy

Size

Preview

Code

Button

DLButton(
  type: DLButtonType.primary,
  size: DLButtonSize.lg,
  label: 'Button',
  onPressed: () {},
),
DLButton(
  type: DLButtonType.primary,
  size: DLButtonSize.md,
  label: 'Button',
  onPressed: () {},
),
DLButton(
  type: DLButtonType.primary,
  size: DLButtonSize.sm,
  label: 'Button',
  onPressed: () {},
),
DLButton(
  type: DLButtonType.primary,
  size: DLButtonSize.xs,
  label: 'Button',
  onPressed: () {},
);

Copy

Disabled

Preview

Code

Primary

Secondary

Tertiary

Ghost

DLButton(
  type: DLButtonType.primary,
  size: DLButtonSize.lg,
  label: 'Button',
  enabled: false,
  onPressed: null,
),
DLButton(
  type: DLButtonType.secondary,
  size: DLButtonSize.lg,
  label: 'Button',
  enabled: false,
  onPressed: null,
),
DLButton(
  type: DLButtonType.tertiary,
  size: DLButtonSize.lg,
  label: 'Button',
  enabled: false,
  onPressed: null,
),
DLButton(
  type: DLButtonType.ghost,
  size: DLButtonSize.lg,
  label: 'Button',
  enabled: false,
  onPressed: null,
);

Copy

With Icon

Preview

Code

Button

DLButton(
  type: DLButtonType.primary,
  size: DLButtonSize.lg,
  label: 'Button',
  iconLeft: Icon(Icons.add, size: 24),
  onPressed: () {},
),
DLButton(
  type: DLButtonType.primary,
  size: DLButtonSize.lg,
  label: 'Button',
  iconRight: Icon(Icons.add, size: 24),
  onPressed: () {},
);

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