Skip to content
Türkçe
All snippets

Button variants

One recipe with two intents and two sizes, resolved from a map of classNames.

  • WindRecipe
preview
wind_recipe_button.dart 
final button = WindRecipe(
  base: 'inline-flex items-center rounded-lg font-medium',
  variants: {
    'intent': {
      'primary': 'bg-blue-600 dark:bg-blue-500 text-white',
      'ghost':   'bg-transparent text-blue-600 dark:text-blue-400',
    },
    'size': {
      'sm': 'px-3 py-1.5 text-sm',
      'md': 'px-4 py-2 text-base',
    },
  },
  defaultVariants: {'intent': 'primary', 'size': 'md'},
);
14 lines Open in the playground From the docs: WindRecipe

More like this

  • Featured

    Validated email field

    A form input with a validator, a focus ring and an error: border.

    • WFormInput

  • Disabled button

    A button that fades and greys out through disabled: utilities.

    • WDiv
    • WText
    • WButton

  • Hover transition

    A primary button that darkens and lifts its shadow over 200 milliseconds.

    • WAnchor
    • WDiv
    • WText