{"title":"Atoms\/Badge","parameters":{"componentSubtitle":"Bootstrap Badge Component","docs":{"description":{"component":"Documentation and examples for badges, our small count and labeling component."},"story":{"inline":true}}},"argTypes":{"html_tag":{"name":"HTML Tag","desc":"The HTML tag to use for the bade. Defaults to span.","defaultValue":"span","control":"select","options":{"span":"span","div":"div","a":"a"}},"color":{"name":"Background and Text Color","description":"Set a background-color with contrasting foreground color with our .text-bg-{color} helpers. Previously it was required to manually pair your choice of .text-{color} and .bg-{color} utilities for styling, which you still may use if you prefer.","defaultValue":"secondary","control":"select","options":{"Primary":"primary","Secondary":"secondary","Success":"success","Info":"info","Warning":"warning","Danger":"danger","Light":"light","Dark":"dark"}},"content":{"name":"Content","description":"The content for the button","control":"text","defaultValue":"Button"},"url":{"name":"URL Link","description":"URL link for Badge when the HTML tag is an anchor link.","defaultValue":"","control":"text"},"badge_utility_classes":{"name":"Utility Classes","description":"An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.","control":"object","defaultValue":[]},"attributes":{"name":"Attributes","description":"HTML attributes for the containing element.","control":"object","defaultValue":[]}},"stories":[{"name":"Primary","args":{"html_tag":"span","color":"primary","content":"Badge","url":"","badge_utility_classes":[]},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL2F0b21zXC9iYWRnZVwvYmFkZ2Uuc3Rvcmllcy50d2lnIiwiaWQiOiJQcmltYXJ5In0%3D"}}},{"name":"Secondary","args":{"html_tag":"span","color":"secondary","content":"Badge","url":"","badge_utility_classes":[]},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL2F0b21zXC9iYWRnZVwvYmFkZ2Uuc3Rvcmllcy50d2lnIiwiaWQiOiJTZWNvbmRhcnkifQ%3D%3D"}}},{"name":"Success","args":{"html_tag":"span","color":"success","content":"Badge","url":"","badge_utility_classes":[]},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL2F0b21zXC9iYWRnZVwvYmFkZ2Uuc3Rvcmllcy50d2lnIiwiaWQiOiJTdWNjZXNzIn0%3D"}}},{"name":"Info","args":{"html_tag":"span","color":"info","content":"Badge","url":"","badge_utility_classes":[]},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL2F0b21zXC9iYWRnZVwvYmFkZ2Uuc3Rvcmllcy50d2lnIiwiaWQiOiJJbmZvIn0%3D"}}},{"name":"Warning","args":{"html_tag":"span","color":"warning","content":"Badge","url":"","badge_utility_classes":[]},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL2F0b21zXC9iYWRnZVwvYmFkZ2Uuc3Rvcmllcy50d2lnIiwiaWQiOiJXYXJuaW5nIn0%3D"}}},{"name":"Danger","args":{"html_tag":"span","color":"danger","content":"Badge","url":"","badge_utility_classes":[]},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL2F0b21zXC9iYWRnZVwvYmFkZ2Uuc3Rvcmllcy50d2lnIiwiaWQiOiJEYW5nZXIifQ%3D%3D"}}},{"name":"Light","args":{"html_tag":"span","color":"light","content":"Badge","url":"","badge_utility_classes":[]},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL2F0b21zXC9iYWRnZVwvYmFkZ2Uuc3Rvcmllcy50d2lnIiwiaWQiOiJMaWdodCJ9"}}},{"name":"Dark","args":{"html_tag":"span","color":"dark","content":"Badge","url":"","badge_utility_classes":[]},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL2F0b21zXC9iYWRnZVwvYmFkZ2Uuc3Rvcmllcy50d2lnIiwiaWQiOiJEYXJrIn0%3D"}}}]}