Button Component Demos

Minimal

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Click 押下
Input

Long Labels

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input
Button__YDF.DecorativeVariations.accented
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input
Button__YDF.DecorativeVariations.danger
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input
Button__YDF.DecorativeVariations.accented
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input
Button__YDF.DecorativeVariations.danger
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input

Prepended SVG Icons

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Like!
Input
Unavailable
Button__YDF.DecorativeVariations.accented
Button
Link
Like!
Input
Unavailable
Button__YDF.DecorativeVariations.danger
Button
Link
Like!
Input
Unavailable
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Like!
Input
Unavailable
Button__YDF.DecorativeVariations.accented
Button
Link
Like!
Input
Unavailable
Button__YDF.DecorativeVariations.danger
Button
Link
Like!
Input
Unavailable
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Like!
Input
Unavailable

Appended SVG Icons

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Like!
Input
Unavailable
Button__YDF.DecorativeVariations.accented
Button
Link
Like!
Input
Unavailable
Button__YDF.DecorativeVariations.danger
Button
Link
Like!
Input
Unavailable
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Like!
Input
Unavailable
Button__YDF.DecorativeVariations.accented
Button
Link
Like!
Input
Unavailable
Button__YDF.DecorativeVariations.danger
Button
Link
Like!
Input
Unavailable
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Like!
Input
Unavailable

Lone Icons

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Input
Unavailable
Button__YDF.DecorativeVariations.accented
Button
Link
Input
Unavailable
Button__YDF.DecorativeVariations.danger
Button
Link
Input
Unavailable
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Input
Unavailable
Button__YDF.DecorativeVariations.accented
Button
Link
Input
Unavailable
Button__YDF.DecorativeVariations.danger
Button
Link
Input
Unavailable
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Input
Unavailable

Custom SVG Icon

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Menu
Input
Unavailable
Button__YDF.DecorativeVariations.accented
Button
Link
Menu
Input
Unavailable
Button__YDF.DecorativeVariations.danger
Button
Link
Menu
Input
Unavailable
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Menu
Input
Unavailable
Button__YDF.DecorativeVariations.accented
Button
Link
Menu
Input
Unavailable
Button__YDF.DecorativeVariations.danger
Button
Link
Menu
Input
Unavailable
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Menu
Input
Unavailable

Geometric Modifiers

Pill Shape

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Click 押下
Input

Square Shape

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Input

Square Shape Unless Overflowed

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Click 押下
Input

Single Line

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input
Button__YDF.DecorativeVariations.accented
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input
Button__YDF.DecorativeVariations.danger
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input
Button__YDF.DecorativeVariations.accented
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input
Button__YDF.DecorativeVariations.danger
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
OverflowTest:ÀÇĤfhjgpjklbĜiEstosTreMalfacileEnvolverLaVicoAbcdefghijklmnopqrstuvwxyzabcdefgghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwx
Input

No Left Border and Roundings

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Click 押下
Input

No Right Border and Roundings

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Click 押下
Input

No Top Border and Roundings

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Click 押下
Input

No Bottom Border and Roundings

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Click 押下
Input

No Roundings

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Click 押下
Input

Horizontally Shrinkable

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Click 押下
Input

Decorative Modifiers

Borders Disguising

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Click 押下
Input

No Background

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Click 押下
Input

No Background in Default State Decorative Modifier

Button__YDF.Themes.regular
Button__YDF.GeometricVariations.regular
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.small
Button__YDF.DecorativeVariations.regular
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.accented
Button
Link
Click 押下
Input
Button__YDF.DecorativeVariations.danger
Button
Link
Click 押下
Input
Button__YDF.GeometricVariations.linkLike
Button__YDF.DecorativeVariations.linkLike
Button
Link
Click 押下
Input

Loading Placeholder