DlButtonTimed(
    label: 'Resend code',
    countdownInSeconds: 10,
    onPressed: () {
      // Called at 0:00 when user taps.
      // Then timer restarts automatically from 10.
    },
),

Copy

Usage

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

DlButtonTimed(
    label: 'Resend code',
    countdownInSeconds: 10,
    onPressed: () {
      // Called at 0:00 when user taps.
      // Then timer restarts automatically from 10.
    },
),

Copy

API Reference

DlButtonTimed is a countdown-based button that starts disabled, becomes default at 0:00, and restarts the countdown cycle each time it is pressed.

Prop

Type

Default

label

String

required

countdownInSeconds

int

required

onPressed

VoidCallback?

null

onCountdownCompleted

VoidCallback?

null

type

primary

secondary

tertiary

ghost

primary

size

state

defaultState

disabled

defaultState

iconLeft

Widget?

null

iconRight

Widget?

null

fullWidth

bool

false

Examples

Variants

Preview

Code

Label (0:10)

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    DlButtonTimed(
      label: 'Label',
      countdownInSeconds: 10,
      size: DlButtonSize.lg,
      type: DlButtonType.primary,
      onPressed: () {},
    ),
    const SizedBox(height: 16),
    DlButtonTimed(
      label: 'Label',
      countdownInSeconds: 10,
      size: DlButtonSize.lg,
      type: DlButtonType.secondary,
      onPressed: () {},
    ),
    const SizedBox(height: 16),
    DlButtonTimed(
      label: 'Label',
      countdownInSeconds: 10,
      size: DlButtonSize.lg,
      type: DlButtonType.tertiary,
      onPressed: () {},
    ),
  ],
)

Copy

Size

Preview

Code

Label (0:10)

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    DlButtonTimed(
      label: 'Label',
      countdownInSeconds: 10,
      size: DlButtonSize.lg,
      onPressed: () {},
    ),
    const SizedBox(height: 16),
    DlButtonTimed(
      label: 'Label',
      countdownInSeconds: 10,
      size: DlButtonSize.md,
      onPressed: () {},
    ),
    const SizedBox(height: 16),
    DlButtonTimed(
      label: 'Label',
      countdownInSeconds: 10,
      size: DlButtonSize.sm,
      onPressed: () {},
    ),
    const SizedBox(height: 16),
    DlButtonTimed(
      label: 'Label',
      countdownInSeconds: 10,
      size: DlButtonSize.xs,
      onPressed: () {},
    ),
  ],
)

Copy

Disabled

Preview

Code

Label (0:05)

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function AvatarDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-12">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar className="rounded-lg">
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </div>
    </div>
  )
}

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