Preview
Dart
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]),
This button will have different sizes on different browser viewpoints
Preview
Dart
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
],
)
Preview
Dart
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]),
Preview
Dart
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]),
Preview
Dart
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]),
Preview
Dart
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]),
These buttons use dark text, only use them on light backgrounds
Preview
Dart
// 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]),
Preview
Dart
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]),
Preview
Dart
Button([text('Ghost')], style: [Button.ghost]),
Button([text('Link')], style: [Button.link]),
Preview
Dart
// 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'}),
Preview
Dart
// 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 aspect ratio or with rounded corners
Preview
Dart
Button(
[Icon('favorite', style: [TextUtil.lg])],
style: [Button.square],
),
Button(
[Icon('favorite', style: [TextUtil.lg])],
style: [Button.circle],
),
Preview
Dart
Button([
Icon('favorite', style: [TextUtil.lg]),
text('Like'),
]),
Button([
text('Like'),
Icon('favorite', style: [TextUtil.lg]),
]),
Preview
Dart
Button(
[span(classes: 'loading loading-spinner', [])],
style: [Button.square],
),
Button([
span(classes: 'loading loading-spinner', []),
text('loading'),
]),
Preview
Dart
// 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',
),