This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.

🚧

Preview

Code

DlButtonLoading(
    type: DlButtonType.primary,
    size: DlButtonSize.lg,
)

Copy

Usage

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

DlButtonLoading(
    type: DlButtonType.primary,
    size: DlButtonSize.lg,
)

Copy

API Reference

DlButtonLoading is a non-interactive loading-only button that keeps the standard button shape/size/type styling while replacing text and icons with animated loading dots.

Prop

Type

Default

type

primary

secondary

tertiary

ghost

primary

size

fullWidth

bool

false

stepDuration

Duration

Duration(milliseconds: 300)

Examples

Variants

Preview

Code

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    DlButtonLoading(
      type: DlButtonType.primary,
    ),
    SizedBox(height: 16),
    DlButtonLoading(
      type: DlButtonType.secondary,
    ),
    DlButtonLoading(
      type: DlButtonType.tertiary,
    ),
    SizedBox(height: 16),
    DlButtonLoading(
      type: DlButtonType.ghost,
    ),
  ],
)

Copy

Size

Preview

Code

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    DlButtonLoading(
      type: DlButtonType.primary,
      size: DlButtonSize.lg,
    ),
    SizedBox(height: 12),
    DlButtonLoading(
      type: DlButtonType.primary,
      size: DlButtonSize.md,
    ),
    SizedBox(height: 12),
    DlButtonLoading(
      type: DlButtonType.primary,
      size: DlButtonSize.sm,
    ),
    SizedBox(height: 12),
    DlButtonLoading(
      type: DlButtonType.primary,
      size: DlButtonSize.xs,
    ),
  ],
)

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