button.svelte.md

title	desc	published
Button	Buttons allow the user to take actions or make choices.	true

<script> import Component from "@components/Component.svelte" import ClassTable from "@components/ClassTable.svelte" import { prefix } from '$lib/stores'; import { replace } from '$lib/actions'; </script>

Button

{
`Button`
}

{
`Button`
}

Button Primary Secondary Accent Ghost Link

{
`Button
Button
Button
Button
Button
Button`
}

{
`Button
Button
Button
Button
Button
Button`
}

Button Primary Secondary Accent Ghost Link

{
`Button
Button
Button
Button
Button
Button`
}

{
`Button
Button
Button
Button
Button
Button`
}

Info Success Warning Error

{
`Info
Success
Warning
Error`
}

{
`Info
Success
Warning
Error`
}

Button Primary Secondary Accent

{
`Button
Button
Button
Button`
}

{
`Button
Button
Button
Button`
}

Info Success Warning Error

{
`Info
Success
Warning
Error`
}

{
`Info
Success
Warning
Error`
}

Large Normal Small Tiny

{
`Large
Normal
Small
Tiny`
}

{
`Large
Normal
Small
Tiny`
}

Responsive

{
`Responsive`
}

{
`Responsive`
}

Wide

{
`Wide`
}

{
`Wide`
}

Glass button

{
`Glass button`
}

{
`Glass button`
}

Link Button

{
`Link
Button


`
}

{
`Link
Button


`
}

Disabled using attribute Disabled using class name

{
`Disabled using attribute
Disabled using class name`
}

{
`Disabled using attribute
Disabled using className name`
}

{
`
  


  
`
}

{
`
  


  
`
}

{
`
  


  
`
}

{
`
  


  
`
}

Button

{
`
  
  Button
`
}

{
`
  
  Button
`
}

Button

{
`
  Button
  
`
}

{
`
  Button
  
`
}

block

{
`block`
}

{
`block`
}

{
``
}

{
``
}

loading

{
`loading`
}

{
`loading`
}

I don't have click animation

{
`I don't have click animation`
}

{
`I don't have click animation`
}