Button

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

Primary

Preview

Code

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

Secondary

Preview

Code

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

Destructive

Preview

Code

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

Outline

Preview

Code

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

Ghost

Preview

Code

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

Link

Preview

Code

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

Icon

Preview

Code

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

Text and Icon

Preview

Code

ShadButton(
  onPressed: () {},
  text: const Text('Login with Email'),
  icon: const Padding(
    padding: EdgeInsets.only(right: 8),
    child: Icon(
      Icons.mail_outlined,
      size: 16,
    ),
  ),
)

Loading

Preview

Code

ShadButton(
  onPressed: () {},
  text: const Text('Please wait'),
  icon: const Padding(
    padding: EdgeInsets.only(right: 8),
    child: 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),
    ),
  ],
  text: const Text('Gradient with Shadow'),
)