Vue Bootstrap buttons
Use MDB’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
All the visually attractive and highly functional buttons we provided you with are fully customizable and easily adjustable to your needs.
Each of them contains characteristic Material Design elements, such as shadows, living colors or subtle animation on hovering.
Fancy larger or smaller buttons? Add
size="sm" for additional sizes.
<btn size="lg" color="primary">Large button</btn> <btn size="lg" color="default">Large button</btn>
<btn size="sm" color="primary">Small button</btn> <btn size="sm" color="default">Small button</btn>
Create block level buttons—those that span the full width of a parent—by adding
<btn block color="default">Block level button</btn> <btn block color="primary">Block level button</btn>
btns will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to
<btn>s as they use a pseudo-class.
However, you can still force the same active appearance with
active should you need to replicate the state programmatically.
<btn active size="lg" color="primary">btn active</btn> <btn tag="a" role="button" active size="lg" href="#">btn active</btn>
Make buttons look inactive by adding the
disabled boolean attribute to any
<btn disabled size="lg" color="primary">Primary button</btn> <btn disabled size="lg" color="default">Button</btn>
Link functionality caveat
pointer-events: noneto try to disable the link functionality of
<a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support
pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a