Button

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

Primary

Preview

Code

ShadButton(
 child: const Text('Primary'),
 onPressed: () {},
)

Secondary

Preview

Code

ShadButton.secondary(
  child: const Text('Secondary'),
  onPressed: () {},
)

Destructive

Preview

Code

ShadButton.destructive(
  child: const Text('Destructive'),
  onPressed: () {},
)

Outline

Preview

Code

ShadButton.outline(
  child: const Text('Outline'),
  onPressed: () {},
)

Ghost

Preview

Code

ShadButton.ghost(
  child: const Text('Ghost'),
  onPressed: () {},
)

Link

Preview

Code

ShadButton.link(
  child: const Text('Link'),
  onPressed: () {},
)

Icon

Preview

Code

ShadButton.outline(
  icon: const Icon(
    Icons.chevron_right,
    size: 16,
  ),
  onPressed: () {},
),

Text and Icon

Preview

Code

ShadButton(
  onPressed: () {},
  child: const Text('Login with Email'),
  icon: Icon(
    Icons.mail_outlined,
    size: 16,
  ),
)

Loading

Preview

Code

ShadButton(
  onPressed: () {},
  child: const Text('Please wait'),
  icon: SizedBox.square(
    dimension: 16,
    child: CircularProgressIndicator(strokeWidth: 2),
  ),
)

Gradient and Shadow

Preview

Code

ShadButton(
  onPressed: () {},
  gradient: const LinearGradient(colors: [
    Colors.cyan,
    Colors.indigo,
  ]),
  shadows: [
    BoxShadow(
      color: Colors.blue.withOpacity(.4),
      spreadRadius: 4,
      blurRadius: 10,
      offset: const Offset(0, 2),
    ),
  ],
  child: const Text('Gradient with Shadow'),
)