Deepyr Documentation

Button

Button([text('Default')])

Button sizes

Button([text('Xsmall')], style: [Button.xs]),
Button([text('Small')], style: [Button.sm]),
Button([text('Medium')]), // Default size
Button([text('Large')], style: [Button.lg]),
Button([text('Xlarge')], style: [Button.xl]),

Responsive button

This button will have different sizes on different browser viewpoints

Button(
  [text('Responsive')],
  style: [
    Button.xs, // Default mobile size
    Button.sm.atSm, // Small at small screen and up
    Button.md.atMd, // Medium at Medium screen and up
    Button.lg.atLg, // Large at Large screen and up
    Button.xl.atXl, // Extra large at XL screen and up
  ],
)

Buttons colors

Button([text('Neutral')], style: [Button.neutral]),
Button([text('Primary')], style: [Button.primary]),
Button([text('Secondary')], style: [Button.secondary]),
Button([text('Accent')], style: [Button.accent]),
Button([text('Info')], style: [Button.info]),
Button([text('Success')], style: [Button.success]),
Button([text('Warning')], style: [Button.warning]),
Button([text('Error')], style: [Button.error]),

Soft buttons

Button([text('Default')], style: [Button.soft]),
Button([text('Primary')], style: [Button.soft, Button.primary]),
Button([text('Secondary')], style: [Button.soft, Button.secondary]),
Button([text('Accent')], style: [Button.soft, Button.accent]),
Button([text('Info')], style: [Button.soft, Button.info]),
Button([text('Success')], style: [Button.soft, Button.success]),
Button([text('Warning')], style: [Button.soft, Button.warning]),
Button([text('Error')], style: [Button.soft, Button.error]),

Outline buttons

Button([text('Default')], style: [Button.outline]),
Button([text('Primary')], style: [Button.primary, Button.outline]),
Button([text('Secondary')], style: [Button.secondary, Button.outline]),
Button([text('Accent')], style: [Button.accent, Button.outline]),
Button([text('Info')], style: [Button.info, Button.outline]),
Button([text('Success')], style: [Button.success, Button.outline]),
Button([text('Warning')], style: [Button.warning, Button.outline]),
Button([text('Error')], style: [Button.error, Button.outline]),

Dash buttons

Button([text('Default')], style: [Button.dash]),
Button([text('Primary')], style: [Button.primary, Button.dash]),
Button([text('Secondary')], style: [Button.secondary, Button.dash]),
Button([text('Accent')], style: [Button.accent, Button.dash]),
Button([text('Info')], style: [Button.info, Button.dash]),
Button([text('Success')], style: [Button.success, Button.dash]),
Button([text('Warning')], style: [Button.warning, Button.dash]),
Button([text('Error')], style: [Button.error, Button.dash]),

Neutral button with outline or dash style

These buttons use dark text, only use them on light backgrounds

// Ensure these buttons are placed on a light background
Button([text('Outline')], style: [Button.neutral, Button.outline]),
Button([text('Dash')], style: [Button.neutral, Button.dash]),

Active buttons

Button([text('Default')], style: [Button.active]),
Button([text('Primary')], style: [Button.active, Button.primary]),
Button([text('Secondary')], style: [Button.active, Button.secondary]),
Button([text('Accent')], style: [Button.active, Button.accent]),
Button([text('Info')], style: [Button.active, Button.info]),
Button([text('Success')], style: [Button.active, Button.success]),
Button([text('Warning')], style: [Button.active, Button.warning]),
Button([text('Error')], style: [Button.active, Button.error]),

Ghost and link buttons

Button([text('Ghost')], style: [Button.ghost]),
Button([text('Link')], style: [Button.link]),

Wide button

Button([text('Wide')], style: [Button.wide])

Buttons with any HTML tags

Link

// Anchor styled as button using Deepyr Button
Button([text('Link')], tag: 'a', attributes: {'href': '#'}),

// Standard Button component (renders <button type="submit">)
Button([text('Button')], htmlType: ButtonHtmlType.submit),

// Inputs styled as buttons using Deepyr Button
Button([], tag: 'input', htmlType: ButtonHtmlType.button, attributes: {'value': 'Input'}),
Button([], tag: 'input', htmlType: ButtonHtmlType.submit, attributes: {'value': 'Submit'}),
Button([], tag: 'input', attributes: {'type': 'radio', 'aria-label': 'Radio'}),
Button([], tag: 'input', attributes: {'type': 'checkbox', 'aria-label': 'Checkbox'}),
Button([], tag: 'input', htmlType: ButtonHtmlType.reset, attributes: {'value': 'Reset'}),

Disabled buttons

// Using HTML 'disabled' attribute
Button([text('Disabled using attribute')], attributes: {'disabled': ''}),

// Using DaisyUI 'btn-disabled' class via modifier
// This will also add tabindex="-1" and aria-disabled="true"
Button([text('Disabled using class name')], style: [Button.disabled]),

Square button and circle button

Square aspect ratio or with rounded corners

Button(
  [Icon('favorite', style: [TextUtil.lg])],
  style: [Button.square],
),
Button(
  [Icon('favorite', style: [TextUtil.lg])],
  style: [Button.circle],
),

Button with Icon

Button([
  Icon('favorite', style: [TextUtil.lg]),
  text('Like'),
]),
Button([
  text('Like'),
  Icon('favorite', style: [TextUtil.lg]),
]),

Button block

Button([text('block')], style: [Button.block])

Button with loading spinner

Button(
  [span(classes: 'loading loading-spinner', [])],
  style: [Button.square],
),
Button([
  span(classes: 'loading loading-spinner', []),
  text('loading'),
]),

Login buttons

// Note: Icon functions like _emailIcon() return Component instances (e.g., an inline SVG).
// Email
Button(
  [_emailIcon(), text('Login with Email')],
  classes: 'bg-white text-black border-[#e5e5e5] hover:bg-gray-100',
),
// GitHub
Button(
  [_githubIcon(), text('Login with GitHub')],
  classes: 'bg-black text-white border-black hover:bg-gray-800',
),
// Google
Button(
  [_googleIcon(), text('Login with Google')],
  classes: 'bg-white text-black border-[#e5e5e5] hover:bg-gray-100',
),
// Facebook
Button(
  [_facebookIcon(), text('Login with Facebook')],
  classes: 'bg-[#1A77F2] text-white border-[#005fd8] hover:bg-blue-600',
),
// X
Button(
  [_xIcon(), text('Login with X')],
  classes: 'bg-black text-white border-black hover:bg-gray-800',
),
// Kakao
Button(
  [_kakaoIcon(), text('카카오 로그인')],
  classes: 'bg-[#FEE502] text-[#181600] border-[#f1d800] hover:bg-yellow-400',
),
// Apple
Button(
  [_appleIcon(), text('Login with Apple')],
  classes: 'bg-black text-white border-black hover:bg-gray-800',
),
// Amazon
Button(
  [_amazonIcon(), text('Login with Amazon')],
  classes: 'bg-[#FF9900] text-black border-[#e17d00] hover:bg-orange-500',
),
// Microsoft
Button(
  [_microsoftIcon(), text('Login with Microsoft')],
  classes: 'bg-[#2F2F2F] text-white border-black hover:bg-gray-700',
),
// Line
Button(
  [_lineIcon(), text('LINEでログイン')],
  classes: 'bg-[#03C755] text-white border-[#00b544] hover:bg-green-600',
),
// Slack
Button(
  [_slackIcon(), text('Login with Slack')],
  classes: 'bg-[#622069] text-white border-[#591660] hover:bg-purple-700',
),
// LinkedIn
Button(
  [_linkedinIcon(), text('Login with LinkedIn')],
  classes: 'bg-[#0967C2] text-white border-[#0059b3] hover:bg-blue-700',
),
// VK
Button(
  [_vkIcon(), text('Login with VK')],
  classes: 'bg-[#47698F] text-white border-[#35567b] hover:bg-blue-800',
),
// WeChat
Button(
  [_wechatIcon(), text('Login with WeChat')],
  classes: 'bg-[#5EBB2B] text-white border-[#4eaa0c] hover:bg-green-700',
),
// MetaMask
Button(
  [_metamaskIcon(), text('Login with MetaMask')],
  classes: 'bg-white text-black border-[#e5e5e5] hover:bg-gray-100',
),