@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
1,387 lines • 48.6 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/ButtonPage.tsx";
import { Button, IconButton } from '../../../../';
import { CancelIcon, CheckIcon, EditIcon, ReplyIcon, ShareIcon, CautionIcon } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function ButtonPage() {
return _jsxDEV(Library.Page, {
title: "Button",
intro: _jsxDEV("p", {
children: ["Button components apply common styling and accessibility attributes to", ' ', _jsxDEV("code", {
children: "button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 11
}, this), " elements."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 9
}, this),
children: [_jsxDEV(Library.Section, {
title: "Button",
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic Button",
withSource: true,
children: _jsxDEV(Button, {
icon: CheckIcon,
onClick: () => alert('You clicked the button'),
children: "Click me"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 11
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 11
}, this), ".", _jsxDEV(Library.SectionL3, {
title: "expanded",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["This ", "button's", " associated content is expanded."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "icon",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["An SVG icon to display to the left of the ", "button's", " content."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "IconComponent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "pressed",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "This button is active"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "title",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Used to set an ", _jsxDEV("code", {
children: "aria-label"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 32
}, this), " attribute"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 17
}, this), " accepts HTML attribute props applicable to", ' ', _jsxDEV("code", {
children: "HTMLButtonElement"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Omit<preact.JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'icon' | 'size'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Styling API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 13
}, this), " accepts the following props from the", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-styling-api",
children: "presentational component styling API"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 106,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "variant",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set a defined theme on the button. Set to ", `'custom'`, " to disable theming and provide your own theming with", ' ', _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'primary' | 'secondary' | 'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'secondary'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "variant: 'secondary'",
withSource: true,
children: [_jsxDEV(Button, {
variant: "secondary",
children: "Default"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 15
}, this), _jsxDEV(Button, {
variant: "secondary",
children: [_jsxDEV(CancelIcon, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 17
}, this), "Default"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 15
}, this), _jsxDEV(Button, {
variant: "secondary",
pressed: true,
children: "Pressed"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 15
}, this), _jsxDEV(Button, {
variant: "secondary",
expanded: true,
children: "Expanded"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 15
}, this), _jsxDEV(Button, {
variant: "secondary",
disabled: true,
children: "Disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "variant: 'primary'",
withSource: true,
children: [_jsxDEV(Button, {
variant: "primary",
children: "Default"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 15
}, this), _jsxDEV(Button, {
variant: "primary",
children: [_jsxDEV(EditIcon, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 17
}, this), "Default"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 15
}, this), _jsxDEV(Button, {
variant: "primary",
pressed: true,
children: "Pressed"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 15
}, this), _jsxDEV(Button, {
variant: "primary",
expanded: true,
children: "Expanded"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 15
}, this), _jsxDEV(Button, {
variant: "primary",
disabled: true,
children: "Disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "variant: 'custom' (custom theming)",
withSource: true,
children: [_jsxDEV(Button, {
variant: "custom",
classes: "border rounded-md",
children: "Default"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 15
}, this), _jsxDEV(Button, {
variant: "custom",
classes: "border rounded-md",
children: [_jsxDEV(EditIcon, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 17
}, this), "Default"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 15
}, this), _jsxDEV(Button, {
variant: "custom",
pressed: true,
classes: "border rounded-md",
children: "Pressed"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 15
}, this), _jsxDEV(Button, {
variant: "custom",
expanded: true,
classes: "border rounded-md",
children: "Expanded"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 15
}, this), _jsxDEV(Button, {
variant: "custom",
disabled: true,
classes: "border rounded-md",
children: "Disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "size",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set the relative internal sizing of the button. Set to", ' ', `'custom'`, " to disable sizing classes and set your own with", ' ', _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 184,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'xs' | 'sm' | 'md' | 'lg' | 'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 186,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'md'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 189,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 180,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Button sizes",
withSource: true,
children: [_jsxDEV(Button, {
icon: EditIcon,
size: "xs",
children: "(xs)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 15
}, this), _jsxDEV(Button, {
icon: EditIcon,
size: "sm",
children: "(sm)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 15
}, this), _jsxDEV(Button, {
icon: ReplyIcon,
size: "md",
children: "(md)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 15
}, this), _jsxDEV(Button, {
icon: CheckIcon,
size: "lg",
children: "(lg)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 15
}, this), _jsxDEV(Button, {
icon: CheckIcon,
size: "custom",
classes: "p-2 gap-x-3",
children: "(custom)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 206,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 179,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "unstyled",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set this to disable all styling and provide your own styling with ", _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 22
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 219,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 218,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 222,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 213,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "unstyled Button with custom styling",
withSource: true,
children: _jsxDEV(Button, {
unstyled: true,
classes: "border rounded-md p-2 bg-stone-100 font-normal color-slate-600 hover:bg-stone-50 hover:color-slate-700 hover:shadow-lg",
children: "Custom button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 230,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 226,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "IconButton",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 13
}, this), " is for icon-only ", _jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 54
}, this), "s."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 244,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 250,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic IconButton",
withSource: true,
children: _jsxDEV(IconButton, {
onClick: () => alert('You clicked the button'),
icon: ReplyIcon,
title: "Reply"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 253,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 252,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 251,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with IconButtons",
children: _jsxDEV(Library.SectionL3, {
title: "Styling the icon",
children: [_jsxDEV("p", {
children: ["If you need more control over icon styles, use an icon component directly in the content instead of passing an ", _jsxDEV("code", {
children: "icon"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 266,
columnNumber: 61
}, this), ' ', "prop."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 264,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: [_jsxDEV(IconButton, {
title: "Share",
children: _jsxDEV(ShareIcon, {
className: "w-8 h-8"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 271,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 270,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
title: "Share",
children: _jsxDEV(ShareIcon, {
className: "w-3 h-3"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 274,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 273,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 269,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 263,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 262,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV(Library.SectionL3, {
title: "title",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["A ", _jsxDEV("code", {
children: "title"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 19
}, this), " is required for ", _jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 54
}, this), "s."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 283,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 287,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 286,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "required",
children: _jsxDEV("code", {
children: "true"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 290,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 289,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 282,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...buttonProps",
children: [_jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 296,
columnNumber: 13
}, this), " accepts and forwards all props from the", ' ', _jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 297,
columnNumber: 13
}, this), " component API."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 295,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 303,
columnNumber: 17
}, this), " accepts HTML attribute props applicable to ", _jsxDEV("code", {
children: "HTMLButtonElement"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 304,
columnNumber: 20
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 302,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Omit<preact.JSX.HTMLAttributes<HTMLButtonElement>, 'icon' | 'size'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 307,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 306,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 301,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 300,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Styling API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 315,
columnNumber: 13
}, this), " accepts the following props from the", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-styling-api",
children: "presentational component styling API"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 316,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 314,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "variant",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set a defined theme on the button. Set to ", `'custom'`, " to disable theming and provide your own theming with", ' ', _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 326,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 323,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'primary' | 'secondary' | 'dark' | 'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 329,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 328,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'secondary'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 332,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 331,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 322,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["The following examples show themed ", _jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 337,
columnNumber: 50
}, this), "s in default state, ", _jsxDEV("code", {
children: "pressed"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 338,
columnNumber: 30
}, this), ", ", _jsxDEV("code", {
children: "expanded"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 338,
columnNumber: 52
}, this), " and", ' ', _jsxDEV("code", {
children: "disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 339,
columnNumber: 15
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 336,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "variant: 'secondary'",
withSource: true,
children: [_jsxDEV(IconButton, {
variant: "secondary",
title: "Watch out!",
icon: CautionIcon
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 343,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
variant: "secondary",
title: "Watch out!",
icon: CautionIcon,
pressed: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 348,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
variant: "secondary",
title: "Watch out!",
icon: CautionIcon,
expanded: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 354,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
variant: "secondary",
title: "Watch out!",
icon: CautionIcon,
disabled: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 360,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 342,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "variant: 'primary'",
withSource: true,
children: [_jsxDEV(IconButton, {
variant: "primary",
title: "Watch out!",
icon: CautionIcon
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 369,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
variant: "primary",
title: "Watch out!",
icon: CautionIcon,
pressed: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 374,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
variant: "primary",
title: "Watch out!",
icon: CautionIcon,
expanded: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 380,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
variant: "primary",
title: "Watch out!",
icon: CautionIcon,
disabled: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 386,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 368,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
classes: "bg-slate-0 p-4",
title: "variant: 'dark'",
withSource: true,
children: [_jsxDEV(IconButton, {
variant: "dark",
title: "Watch out!",
icon: CautionIcon
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 398,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
variant: "dark",
title: "Watch out!",
icon: CautionIcon,
pressed: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 403,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
variant: "dark",
title: "Watch out!",
icon: CautionIcon,
expanded: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 409,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
variant: "dark",
title: "Watch out!",
icon: CautionIcon,
disabled: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 415,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 393,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "variant: 'custom' with custom theming",
withSource: true,
children: [_jsxDEV(IconButton, {
classes: "border rounded-md text-slate-600",
variant: "custom",
title: "Watch out!",
icon: CautionIcon
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 427,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
classes: "border rounded-md text-slate-800 bg-stone-100 border-slate-400",
variant: "custom",
title: "Watch out!",
icon: CautionIcon,
pressed: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 433,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
variant: "custom",
classes: "border rounded-md text-slate-800 bg-stone-100 border-slate-400",
title: "Watch out!",
icon: CautionIcon,
expanded: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 440,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
classes: "border rounded-md text-slate-400",
variant: "custom",
title: "Watch out!",
icon: CautionIcon,
disabled: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 447,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 423,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 321,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "size",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set relative internal sizing. Set to ", `'custom'`, " to disable sizing classes and set your own with ", _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 461,
columnNumber: 54
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 459,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'xs' | 'sm' | 'md' | 'lg' | 'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 464,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 463,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'md'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 467,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 466,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 458,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "size: 'xs', 'sm', 'md', 'lg' and 'custom'",
withSource: true,
children: [_jsxDEV(IconButton, {
icon: EditIcon,
size: "xs",
title: "Edit"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 474,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
icon: EditIcon,
size: "sm",
title: "Edit"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 475,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
icon: EditIcon,
size: "md",
title: "Edit"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 476,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
icon: EditIcon,
size: "lg",
title: "Edit"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 477,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
icon: EditIcon,
size: "custom",
title: "Edit",
classes: "p-3"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 478,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 470,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 457,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "unstyled",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set this to disable all styling and provide your own styling with ", _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 490,
columnNumber: 22
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 488,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 493,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 492,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 496,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 495,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 487,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 486,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 313,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 241,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 5
}, this);
}
//# sourceMappingURL=ButtonPage.js.map