Button

Implementation: modules/components/atoms/button.liquid

Tag (String): button | a

Size (String): normal | small

Filled (Boolean): false | true

Weight (String): primary | secondary

Classes (String):

Content (String): Click me

Variant (String): normal | important | confirmation | inverted

Disabled (Boolean): false | true

Variants & examples


tag: button
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

tag: a
Click me
{"tag":"a","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

size: normal
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

size: small
{"tag":"button","size":"small","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

filled: true
{"tag":"button","size":"normal","filled":true,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

weight: primary
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

weight: secondary
{"tag":"button","size":"normal","filled":false,"weight":"secondary","classes":"","content":"Click me","variant":"normal","disabled":false}

variant: normal
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":false}

variant: important
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"important","disabled":false}

variant: confirmation
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"confirmation","disabled":false}

variant: inverted
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"inverted","disabled":false}

disabled: true
{"tag":"button","size":"normal","filled":false,"weight":"primary","classes":"","content":"Click me","variant":"normal","disabled":true}