[{"data":1,"prerenderedAt":301},["ShallowReactive",2],{"page:\u002Fdesign-system\u002Fbutton":3},{"id":4,"title":5,"body":6,"description":293,"extension":294,"meta":295,"navigation":296,"path":297,"seo":298,"stem":299,"__hash__":300},"pages\u002Fdesign-system\u002Fbutton.md","Button",{"type":7,"value":8,"toc":285},"minimark",[9,14,27,30,69,73,84,86,205,209,211,215,282],[10,11,13],"h2",{"id":12},"variants","Variants",[15,16,17,18,22,23,26],"p",{},"Buttons have 12px corners in every channel; a pill is never a button. In the app they are ",[19,20,21],"code",{},"SPButton",", built on the Material buttons with the theme from ",[19,24,25],{},"SPButtonStyles",".",[28,29],"ds-buttons",{"show":12},[31,32,33,41,63],"ul",{},[34,35,36,40],"li",{},[37,38,39],"strong",{},"One filled button per screen",", for the action the screen is about. Everything else is outlined or text.",[34,42,43,46,47,51,52,55,56,59,60,26],{},[37,44,45],{},"The label says what happens",", as a verb: ",[48,49,50],"em",{},"Start parking",", ",[48,53,54],{},"Pay your invoice",". Never ",[48,57,58],{},"OK"," or ",[48,61,62],{},"Click here",[34,64,65,68],{},[37,66,67],{},"Full width in a footer"," on a phone, its natural width everywhere else.",[10,70,72],{"id":71},"meanings","Meanings",[15,74,75,76,79,80,83],{},"The color of a filled button comes from its meaning (",[19,77,78],{},"SduiSemantic","), not from taste. Each meaning uses its ",[19,81,82],{},"…Surface"," token with white text.",[28,85],{"show":71},[87,88,89,105],"table",{},[90,91,92],"thead",{},[93,94,95,99,102],"tr",{},[96,97,98],"th",{},"Meaning",[96,100,101],{},"Surface",[96,103,104],{},"Use it for",[106,107,108,125,140,155,169,183],"tbody",{},[93,109,110,116,122],{},[111,112,113],"td",{},[19,114,115],{},"primary",[111,117,118],{},[119,120],"color-chip",{"c":121},"primary 500",[111,123,124],{},"The main action. Almost always this one.",[93,126,127,132,137],{},[111,128,129],{},[19,130,131],{},"secondary",[111,133,134],{},[119,135],{"c":136},"secondary 1000",[111,138,139],{},"A strong action that isn't the main one.",[93,141,142,147,152],{},[111,143,144],{},[19,145,146],{},"danger",[111,148,149],{},[119,150],{"c":151},"error",[111,153,154],{},"Stopping a parking action, removing a car or a card.",[93,156,157,162,166],{},[111,158,159],{},[19,160,161],{},"success",[111,163,164],{},[119,165],{"c":161},[111,167,168],{},"Confirming a step that went well. Rare.",[93,170,171,176,180],{},[111,172,173],{},[19,174,175],{},"warning",[111,177,178],{},[119,179],{"c":175},[111,181,182],{},"Fixing something urgent, like a low balance. Rare.",[93,184,185,190,195],{},[111,186,187],{},[19,188,189],{},"info",[111,191,192],{},[119,193],{"c":194},"grey 700",[111,196,197,198,201,202,26],{},"A neutral action next to another one, like ",[48,199,200],{},"Details"," next to ",[48,203,204],{},"Stop",[10,206,208],{"id":207},"sizes","Sizes",[28,210],{"show":207},[10,212,214],{"id":213},"states","States",[87,216,217,230],{},[90,218,219],{},[93,220,221,224,227],{},[96,222,223],{},"State",[96,225,226],{},"Filled",[96,228,229],{},"Outlined and text",[106,231,232,245,256,272],{},[93,233,234,237,240],{},[111,235,236],{},"Default",[111,238,239],{},"Meaning surface, white label",[111,241,242,244],{},[119,243],{"c":121}," border and label, white background",[93,246,247,250,253],{},[111,248,249],{},"Pressed",[111,251,252],{},"The Material ripple; no color change of its own",[111,254,255],{},"The same",[93,257,258,261,267],{},[111,259,260],{},"Disabled",[111,262,263,266],{},[119,264],{"c":265},"disabled"," background, white label",[111,268,269,271],{},[119,270],{"c":265}," border and label",[93,273,274,277,280],{},[111,275,276],{},"Changing",[111,278,279],{},"When a button changes state, like disabled to enabled, it cross-fades in 200 ms",[111,281,255],{},[15,283,284],{},"Never hide a button to show it's unavailable; disable it, and say why above it when that isn't obvious.",{"title":286,"searchDepth":287,"depth":287,"links":288},"",2,[289,290,291,292],{"id":12,"depth":287,"text":13},{"id":71,"depth":287,"text":72},{"id":207,"depth":287,"text":208},{"id":213,"depth":287,"text":214},"Filled, outlined and text buttons, in six meanings.","md",{},true,"\u002Fdesign-system\u002Fbutton",{"title":5,"description":293},"design-system\u002Fbutton","ODwGshey1qEvYKiiOFPXjaIscgXIRu7z9Yo98ZB6J80",1792779480806]