{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "src/index.ts", "declarations": [], "exports": [ { "kind": "js", "name": "Avatar", "declaration": { "name": "default", "module": "./avatar/Avatar.js" } }, { "kind": "js", "name": "Badge", "declaration": { "name": "default", "module": "./badge/Badge.js" } }, { "kind": "js", "name": "Banner", "declaration": { "name": "default", "module": "./banner/Banner.js" } }, { "kind": "js", "name": "ButtonGroup", "declaration": { "name": "default", "module": "./button-group/ButtonGroup.js" } }, { "kind": "js", "name": "Button", "declaration": { "name": "default", "module": "./button/Button.js" } }, { "kind": "js", "name": "Calendar", "declaration": { "name": "default", "module": "./calendar/Calendar.js" } }, { "kind": "js", "name": "Card", "declaration": { "name": "default", "module": "./card/Card.js" } }, { "kind": "js", "name": "Checkbox", "declaration": { "name": "default", "module": "./checkbox/Checkbox.js" } }, { "kind": "js", "name": "CommandMenu", "declaration": { "name": "default", "module": "./command-menu/CommandMenu.js" } }, { "kind": "js", "name": "CommandMenuAction", "declaration": { "name": "default", "module": "./command-menu/CommandMenuAction.js" } }, { "kind": "js", "name": "DatePicker", "declaration": { "name": "default", "module": "./date-picker/DatePicker.js" } }, { "kind": "js", "name": "Divider", "declaration": { "name": "default", "module": "./divider/Divider.js" } }, { "kind": "js", "name": "Drawer", "declaration": { "name": "default", "module": "./drawer/Drawer.js" } }, { "kind": "js", "name": "DropdownGroup", "declaration": { "name": "default", "module": "./dropdown-group/DropdownGroup.js" } }, { "kind": "js", "name": "DropdownItem", "declaration": { "name": "default", "module": "./dropdown-item/DropdownItem.js" } }, { "kind": "js", "name": "DropdownSubmenu", "declaration": { "name": "default", "module": "./dropdown-submenu/DropdownSubmenu.js" } }, { "kind": "js", "name": "Dropdown", "declaration": { "name": "default", "module": "./dropdown/Dropdown.js" } }, { "kind": "js", "name": "EmptyState", "declaration": { "name": "default", "module": "./empty-state/EmptyState.js" } }, { "kind": "js", "name": "Fieldset", "declaration": { "name": "default", "module": "./fieldset/Fieldset.js" } }, { "kind": "js", "name": "Footer", "declaration": { "name": "default", "module": "./footer/Footer.js" } }, { "kind": "js", "name": "Header", "declaration": { "name": "default", "module": "./header/Header.js" } }, { "kind": "js", "name": "Icon", "declaration": { "name": "default", "module": "./icon/Icon.js" } }, { "kind": "js", "name": "Input", "declaration": { "name": "default", "module": "./input/Input.js" } }, { "kind": "js", "name": "Layout", "declaration": { "name": "default", "module": "./layout/Layout.js" } }, { "kind": "js", "name": "isTranslationRegistered", "declaration": { "name": "isTranslationRegistered", "module": "./localization/translation.js" } }, { "kind": "js", "name": "registerTranslation", "declaration": { "name": "registerTranslation", "module": "./localization/translation.js" } }, { "kind": "js", "name": "Translation", "declaration": { "name": "Translation", "module": "./localization/translation.js" } }, { "kind": "js", "name": "Message", "declaration": { "name": "default", "module": "./message/Message.js" } }, { "kind": "js", "name": "Modal", "declaration": { "name": "default", "module": "./modal/Modal.js" } }, { "kind": "js", "name": "ModalCancelEvent", "declaration": { "name": "ModalCancelEvent", "module": "./modal/Modal.js" } }, { "kind": "js", "name": "ModalCloseEvent", "declaration": { "name": "ModalCloseEvent", "module": "./modal/Modal.js" } }, { "kind": "js", "name": "NavGroup", "declaration": { "name": "default", "module": "./nav-group/NavGroup.js" } }, { "kind": "js", "name": "NavItem", "declaration": { "name": "default", "module": "./nav-item/NavItem.js" } }, { "kind": "js", "name": "NavToggle", "declaration": { "name": "default", "module": "./nav-toggle/NavToggle.js" } }, { "kind": "js", "name": "Navigation", "declaration": { "name": "default", "module": "./navigation/Navigation.js" } }, { "kind": "js", "name": "NotificationGroup", "declaration": { "name": "default", "module": "./notification-group/NotificationGroup.js" } }, { "kind": "js", "name": "Notification", "declaration": { "name": "default", "module": "./notification/Notification.js" } }, { "kind": "js", "name": "Popout", "declaration": { "name": "default", "module": "./popout/Popout.js" } }, { "kind": "js", "name": "ProgressBar", "declaration": { "name": "default", "module": "./progress-bar/ProgressBar.js" } }, { "kind": "js", "name": "Progress", "declaration": { "name": "default", "module": "./progress/Progress.js" } }, { "kind": "js", "name": "Qrcode", "declaration": { "name": "default", "module": "./qrcode/Qrcode.js" } }, { "kind": "js", "name": "Radio", "declaration": { "name": "default", "module": "./radio/Radio.js" } }, { "kind": "js", "name": "Range", "declaration": { "name": "default", "module": "./range/Range.js" } }, { "kind": "js", "name": "SegmentedControlItem", "declaration": { "name": "default", "module": "./segmented-control-item/SegmentedControlItem.js" } }, { "kind": "js", "name": "SegmentedControl", "declaration": { "name": "default", "module": "./segmented-control/SegmentedControl.js" } }, { "kind": "js", "name": "Select", "declaration": { "name": "default", "module": "./select/Select.js" } }, { "kind": "js", "name": "Skeleton", "declaration": { "name": "default", "module": "./skeleton/Skeleton.js" } }, { "kind": "js", "name": "Spinner", "declaration": { "name": "default", "module": "./spinner/Spinner.js" } }, { "kind": "js", "name": "Stack", "declaration": { "name": "default", "module": "./stack/Stack.js" } }, { "kind": "js", "name": "TabGroup", "declaration": { "name": "default", "module": "./tab-group/TabGroup.js" } }, { "kind": "js", "name": "TabPanel", "declaration": { "name": "default", "module": "./tab-panel/TabPanel.js" } }, { "kind": "js", "name": "Tab", "declaration": { "name": "default", "module": "./tab/Tab.js" } }, { "kind": "js", "name": "Table", "declaration": { "name": "default", "module": "./table/Table.js" } }, { "kind": "js", "name": "TagGroup", "declaration": { "name": "default", "module": "./tag-group/TagGroup.js" } }, { "kind": "js", "name": "Tag", "declaration": { "name": "default", "module": "./tag/Tag.js" } }, { "kind": "js", "name": "Textarea", "declaration": { "name": "default", "module": "./textarea/Textarea.js" } }, { "kind": "js", "name": "ToastGroup", "declaration": { "name": "default", "module": "./toast-group/ToastGroup.js" } }, { "kind": "js", "name": "Toast", "declaration": { "name": "default", "module": "./toast/Toast.js" } }, { "kind": "js", "name": "Toggle", "declaration": { "name": "default", "module": "./toggle/Toggle.js" } }, { "kind": "js", "name": "Tooltip", "declaration": { "name": "default", "module": "./tooltip/Tooltip.js" } }, { "kind": "js", "name": "TopBar", "declaration": { "name": "default", "module": "./top-bar/TopBar.js" } }, { "kind": "js", "name": "VisuallyHidden", "declaration": { "name": "default", "module": "./visually-hidden/VisuallyHidden.js" } } ] }, { "kind": "javascript-module", "path": "src/avatar/Avatar.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "type": { "text": "Meta" }, "default": "{ title: 'Components/Avatar', component: 'nord-avatar', tags: ['autodocs'], argTypes: { size: { control: 'select', options: ['s', 'm', 'l', 'xl', 'xxl', 'xxxl'], }, src: { control: 'text' }, name: { control: 'text' }, icon: { control: 'text' }, variant: { control: 'select', options: ['default', 'square'], }, }, parameters: { controls: { disable: true } }, }" }, { "kind": "variable", "name": "Playground", "type": { "text": "Story" }, "default": "{ parameters: { controls: { disable: false } }, args: { size: 'm', variant: 'default', content: '', }, render: args => html` ${args.content} `, }" }, { "kind": "variable", "name": "Basic", "type": { "text": "Story" }, "default": "{ render: () => html` `, }" }, { "kind": "variable", "name": "CustomImage", "type": { "text": "Story" }, "default": "{ render: () => html` `, }" }, { "kind": "variable", "name": "PatientsAndClients", "type": { "text": "Story" }, "default": "{ render: () => html`

Patient

Default (animal) / Uncategorized / Other

Amphibia frog, toad

Arachnida spider, tarantula, scorpion, other insects

Bird parakeets, lovebirds, canaries, parrots

Canine dog, fox, wolf, jackal, coyote

Caprinae sheep, goat, ram, gazelle

Cattle cow, ox, buffalo, bison, bovinae

Equidae horse, donky, mule, zebra

Feline cat, lynx, leopard, ocelot

Fish goldfish, neon tetra, betta fish, clownfish

Leporidae rabbit, hare

Reptilia snake, reptile, turtle, tortoise, lizard, dragons

Rodents mouse, hamster, rat, guinae pig, squirrel

Suidae pig, boar, hog

Client (person)

JD

John Dorian

 JD

Sir John Michael Dorian Jr.

 J

John

 D

Mx. Dorian III

 JD

J. D.

Herd or group of animals

Herd name

Client (organization)

A

Acme Co.

Patient with a photo

Scooby

Scooby

When to use circle / square

Use circle for individuals or single animal

Use square for organizations or group of animals

 `, }" }, { "kind": "variable", "name": "Square", "type": { "text": "Story" }, "default": "{ render: () => html` L LW LW LW LW LW `, }" }, { "kind": "variable", "name": "Users", "type": { "text": "Story" }, "default": "{ render: () => html`

Users: Staff

AW

Anne Williams

Anne Williams

Users: Clinic

A

Acme Clinic

Blank

When creating a new user, since there are no photos or names attached to the new empty profile, there will be a blank (silhouette) as placeholder until a name is entered or a photo is uploaded.

Similarly, if there are no names for the organization yet (during the creation process) use a blank version of the avatar.

`, }" }, { "kind": "variable", "name": "WithIcon", "type": { "text": "Story" }, "default": "{ render: () => html` `, }" }, { "kind": "variable", "name": "WithInitials", "type": { "text": "Story" }, "default": "{ render: () => html` L LW LW LW LW LW `, }" }, { "kind": "variable", "name": "WithTooltip", "type": { "text": "Story" }, "default": "{ render: () => html` Laura Williams (online) `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "src/avatar/Avatar.stories.ts" } }, { "kind": "js", "name": "Playground", "declaration": { "name": "Playground", "module": "src/avatar/Avatar.stories.ts" } }, { "kind": "js", "name": "Basic", "declaration": { "name": "Basic", "module": "src/avatar/Avatar.stories.ts" } }, { "kind": "js", "name": "CustomImage", "declaration": { "name": "CustomImage", "module": "src/avatar/Avatar.stories.ts" } }, { "kind": "js", "name": "PatientsAndClients", "declaration": { "name": "PatientsAndClients", "module": "src/avatar/Avatar.stories.ts" } }, { "kind": "js", "name": "Square", "declaration": { "name": "Square", "module": "src/avatar/Avatar.stories.ts" } }, { "kind": "js", "name": "Users", "declaration": { "name": "Users", "module": "src/avatar/Avatar.stories.ts" } }, { "kind": "js", "name": "WithIcon", "declaration": { "name": "WithIcon", "module": "src/avatar/Avatar.stories.ts" } }, { "kind": "js", "name": "WithInitials", "declaration": { "name": "WithInitials", "module": "src/avatar/Avatar.stories.ts" } }, { "kind": "js", "name": "WithTooltip", "declaration": { "name": "WithTooltip", "module": "src/avatar/Avatar.stories.ts" } } ] }, { "kind": "javascript-module", "path": "src/avatar/Avatar.ts", "declarations": [ { "kind": "class", "description": "Avatar is used for showing a thumbnail representation of a single user or entity.\nDefault avatar illustration is displayed when no src is specified.", "name": "Avatar", "cssProperties": [ { "description": "Controls the color of the avatar fallback, using [color tokens](/tokens/#color).", "name": "--n-avatar-color", "default": "var(--n-color-status-highlight)" }, { "description": "Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).", "name": "--n-avatar-size", "default": "var(--n-size-icon-l)" }, { "description": "Controls the box shadow for the avatar.", "name": "--n-avatar-box-shadow", "default": "none" }, { "description": "Controls the color of the avatar’s text and icon, using [color tokens](/tokens/#color).", "name": "--n-avatar-text-color", "default": "var(--n-color-text-on-accent)" } ], "members": [ { "kind": "field", "name": "state", "type": { "text": "States" }, "privacy": "private", "default": "'initial'" }, { "kind": "field", "name": "size", "type": { "text": "'s' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'" }, "default": "'m'", "description": "The size of the avatar.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "src", "type": { "text": "string | undefined" }, "description": "The URL of the avatar image uploaded by the user.", "attribute": "src", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the person or entity.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "icon", "type": { "text": "string | undefined" }, "description": "The fallback icon.", "attribute": "icon", "reflects": true }, { "kind": "field", "name": "variant", "type": { "text": "'default' | 'square'" }, "default": "'default'", "description": "The style variant of the avatar.", "attribute": "variant", "reflects": true }, { "kind": "method", "name": "handleSrcChange", "privacy": "protected" }, { "kind": "method", "name": "renderImage", "privacy": "protected" }, { "kind": "method", "name": "renderFallback", "privacy": "protected" }, { "kind": "method", "name": "handleLoad", "privacy": "private" }, { "kind": "method", "name": "handleError", "privacy": "private" } ], "attributes": [ { "name": "size", "type": { "text": "'s' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'" }, "default": "'m'", "description": "The size of the avatar.", "fieldName": "size" }, { "name": "src", "type": { "text": "string | undefined" }, "description": "The URL of the avatar image uploaded by the user.", "fieldName": "src" }, { "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the person or entity.", "fieldName": "name" }, { "name": "icon", "type": { "text": "string | undefined" }, "description": "The fallback icon.", "fieldName": "icon" }, { "name": "variant", "type": { "text": "'default' | 'square'" }, "default": "'default'", "description": "The style variant of the avatar.", "fieldName": "variant" } ], "superclass": { "name": "LitElement", "package": "lit" }, "localization": [], "status": "ready", "category": "image", "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n
\n\n### Do\n\n- Use the circle avatar to represent a single user or an animal.\n- Use the square avatar for organizations or group of animals.\n- Always add the name of the user, animal, organization, or group of animals using the `name` property.\n- For the best results, use square images or images cropped into a square.\n\n
\n
\n\n### Don’t\n\n- Don’t use the circle avatar to represent organizations or group of animals.\n- Don’t use the square avatar to represent a single user or an animal.\n- Don’t use an avatar when an icon is more suitable, for example when denoting groups or \"things\".\n- Try to avoid using landscape or portrait images as avatars. Let users crop their images before or after uploading if possible.\n\n
\n", "examples": [], "dependencies": [ "visually-hidden", "icon" ], "tagName": "nord-avatar", "customElement": true } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "Avatar", "module": "src/avatar/Avatar.ts" } }, { "kind": "custom-element-definition", "name": "nord-avatar", "declaration": { "name": "Avatar", "module": "src/avatar/Avatar.ts" } } ] }, { "kind": "javascript-module", "path": "src/banner/Banner.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "type": { "text": "Meta" }, "default": "{ title: 'Components/Banner', component: 'nord-banner', tags: ['autodocs'], argTypes: { variant: { control: 'select', options: ['info', 'danger', 'success', 'warning'], }, content: { control: 'text' }, }, parameters: { controls: { disable: true } }, }" }, { "kind": "variable", "name": "Playground", "type": { "text": "Story" }, "default": "{ parameters: { controls: { disable: false } }, args: { content: 'This is a banner message.', variant: 'info', }, render: args => html` ${args.content} `, }" }, { "kind": "variable", "name": "Basic", "type": { "text": "Story" }, "default": "{ render: () => html` We’ve updated your plan, make sure you know how these changes affect it. Learn more. We’re experiencing an incident. Please see our status page for more details. Payment details missing. To stay on your current plan, add payment details. Your order has been shipped and will arrive on May 27th. Track order. `, }" }, { "kind": "variable", "name": "InfoBanner", "type": { "text": "Story" }, "default": "{ render: () => html` We’ve updated your plan, make sure you know how these changes affect it. Learn more. `, }" }, { "kind": "variable", "name": "InsideCard", "type": { "text": "Story" }, "default": "{ render: () => html`

Paid invoices

We’ve updated your plan, make sure you know how these changes affect it. Learn more. We’re experiencing an incident. Please see our status page for more details. Payment details missing. To stay on your current plan, add payment details. Your order has been shipped and will arrive on May 27th. Track order. `, }" }, { "kind": "variable", "name": "NextToButton", "type": { "text": "Story" }, "default": "{ render: () => html` Submit ticket You need to be logged in with a Nordhealth account to submit tickets. `, }" }, { "kind": "variable", "name": "WithForm", "type": { "text": "Story" }, "default": "{ render: () => html` You’ve been signed out. Please sign in to continue.

Sign in to Nord

Sign in
New to Nord? Create an account. `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "src/banner/Banner.stories.ts" } }, { "kind": "js", "name": "Playground", "declaration": { "name": "Playground", "module": "src/banner/Banner.stories.ts" } }, { "kind": "js", "name": "Basic", "declaration": { "name": "Basic", "module": "src/banner/Banner.stories.ts" } }, { "kind": "js", "name": "InfoBanner", "declaration": { "name": "InfoBanner", "module": "src/banner/Banner.stories.ts" } }, { "kind": "js", "name": "InsideCard", "declaration": { "name": "InsideCard", "module": "src/banner/Banner.stories.ts" } }, { "kind": "js", "name": "NextToButton", "declaration": { "name": "NextToButton", "module": "src/banner/Banner.stories.ts" } }, { "kind": "js", "name": "WithForm", "declaration": { "name": "WithForm", "module": "src/banner/Banner.stories.ts" } } ] }, { "kind": "javascript-module", "path": "src/banner/Banner.ts", "declarations": [ { "kind": "class", "description": "Banner informs users about important changes or conditions in the\ninterface. Use this component if you need to communicate to users\nin a prominent way.", "name": "Banner", "cssProperties": [ { "description": "Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).", "name": "--n-banner-border-radius", "default": "var(--n-border-radius)" }, { "description": "Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).", "name": "--n-banner-box-shadow", "default": "var(--n-box-shadow-card)" } ], "slots": [ { "description": "default slot", "name": "" } ], "members": [ { "kind": "field", "name": "variant", "type": { "text": "'info' | 'danger' | 'success' | 'warning'" }, "default": "'info'", "description": "The style variant of the banner.", "attribute": "variant", "reflects": true } ], "attributes": [ { "name": "variant", "type": { "text": "'info' | 'danger' | 'success' | 'warning'" }, "default": "'info'", "description": "The style variant of the banner.", "fieldName": "variant" } ], "superclass": { "name": "LitElement", "package": "lit" }, "localization": [], "status": "ready", "category": "feedback", "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n
\n\n### Do\n\n- Use this component if you need to communicate in a prominent way.\n- Place banner at the top of the section it applies to.\n- Use for highlighting errors and success statuses.\n- Put banner close to the context it’s referring to.\n- Move focus to the banner if it’s relevant to the current workflow.\n\n
\n
\n\n### Don’t\n\n- Move focus to banner if it appears on page load.\n- Use for highlighting general content or as a banner.\n- Use to replace an error page.\n\n
\n\n---\n\n## Content guidelines\n\nBanner content should be clear, accurate and easy to understand:\n\n
We’re experiencing an incident. Please see our status page for more details.
\n
There was an error.
\n\nWhen writing banner content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n
We’re experiencing an incident.
\n
We’re Experiencing An Incident.
\n\nAlways end in punctuation:\n\n
We’re experiencing an incident.
\n
We’re experiencing an incident
\n", "examples": [], "dependencies": [ "icon" ], "tagName": "nord-banner", "customElement": true } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "Banner", "module": "src/banner/Banner.ts" } }, { "kind": "custom-element-definition", "name": "nord-banner", "declaration": { "name": "Banner", "module": "src/banner/Banner.ts" } } ] }, { "kind": "javascript-module", "path": "src/badge/Badge.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "type": { "text": "Meta" }, "default": "{ title: 'Components/Badge', component: 'nord-badge', tags: ['autodocs'], argTypes: { variant: { control: 'select', options: ['neutral', 'warning', 'success', 'danger', 'highlight', 'info'], }, strong: { control: 'boolean' }, content: { control: 'text' }, }, parameters: { controls: { disable: true } }, }" }, { "kind": "variable", "name": "Playground", "type": { "text": "Story" }, "default": "{ parameters: { controls: { disable: false } }, args: { content: 'Badge', variant: 'neutral', strong: false, }, render: args => html` ${args.content} `, }" }, { "kind": "variable", "name": "Basic", "type": { "text": "Story" }, "default": "{ render: () => html` Neutral Danger Warning Success Info Highlight `, }" }, { "kind": "variable", "name": "Progress", "type": { "text": "Story" }, "default": "{ args: { variant: 'warning', }, render: () => html` Complete Partially complete Incomplete Cancelled `, }" }, { "kind": "variable", "name": "Scale", "type": { "text": "Story" }, "default": "{ render: () => html`
Strongly positive Success Weakly positive Info Neutral Highlight Neutral Neutral Weakly negative Warning Strongly negative Danger
`, }" }, { "kind": "variable", "name": "Strong", "type": { "text": "Story" }, "default": "{ render: () => html` Neutral Danger Warning Success Info Highlight Neutral Danger Warning Success Info Highlight `, }" }, { "kind": "variable", "name": "WithIcon", "type": { "text": "Story" }, "default": "{ render: () => html` Neutral Danger Warning Success Info Highlight `, }" }, { "kind": "variable", "name": "WithTable", "type": { "text": "Story" }, "default": "{ render: () => html`
Amount Status Description Method Date Actions
350,00 € Neutral Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 20.3.2021
Actions
29,90 € Neutral Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 20.3.2021
Actions
50,00 € Info Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 19.3.2021
Actions
49,00 € Info Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 17.3.2021
Actions
1023,00 € Info Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 12.3.2021
Actions
32,00 € Highlight Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 10.3.2021
Actions
40,00 € Highlight Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 9.3.2021
Actions
28,52 € Highlight Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 4.3.2021
Actions
350,00 € Success Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 4.3.2021
Actions
220,00 € Success Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 3.3.2021
Actions
50,00 € Success Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 1.3.2021
Actions
350,00 € Success Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 30.2.2021
Actions
29,90 € Warning Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 28.2.2021
Actions
50,00 € Success Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 28.2.2021
Actions
49,00 € Success Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 26.2.2021
Actions
1023,00 € Alert Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 24.2.2021
Actions
32,00 € Success Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 23.2.2021
Actions
40,00 € Warning Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 22.2.2021
Actions
28,52 € Warning Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 21.2.2021
Actions
350,00 € Success Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 20.2.2021
Actions
220,00 € Success Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer adipiscing Card 18.2.2021
Actions
`, }" }, { "kind": "variable", "name": "WithTitle", "type": { "text": "Story" }, "default": "{ render: () => html`

Web Components2.0.0

`, }" }, { "kind": "variable", "name": "WithVerticallyAlignedText", "type": { "text": "Story" }, "default": "{ render: () => html`
342 1.0 % 87% Returning clients | 338 from previous period
`, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "src/badge/Badge.stories.ts" } }, { "kind": "js", "name": "Playground", "declaration": { "name": "Playground", "module": "src/badge/Badge.stories.ts" } }, { "kind": "js", "name": "Basic", "declaration": { "name": "Basic", "module": "src/badge/Badge.stories.ts" } }, { "kind": "js", "name": "Progress", "declaration": { "name": "Progress", "module": "src/badge/Badge.stories.ts" } }, { "kind": "js", "name": "Scale", "declaration": { "name": "Scale", "module": "src/badge/Badge.stories.ts" } }, { "kind": "js", "name": "Strong", "declaration": { "name": "Strong", "module": "src/badge/Badge.stories.ts" } }, { "kind": "js", "name": "WithIcon", "declaration": { "name": "WithIcon", "module": "src/badge/Badge.stories.ts" } }, { "kind": "js", "name": "WithTable", "declaration": { "name": "WithTable", "module": "src/badge/Badge.stories.ts" } }, { "kind": "js", "name": "WithTitle", "declaration": { "name": "WithTitle", "module": "src/badge/Badge.stories.ts" } }, { "kind": "js", "name": "WithVerticallyAlignedText", "declaration": { "name": "WithVerticallyAlignedText", "module": "src/badge/Badge.stories.ts" } } ] }, { "kind": "javascript-module", "path": "src/badge/Badge.ts", "declarations": [ { "kind": "class", "description": "Badges are used to inform users of the status of an object\nor of an action that’s been taken. Commonly used in tabular\ndata to indicate status.", "name": "Badge", "slots": [ { "description": "The badge content.", "name": "" }, { "description": "Used to place an icon at the start of badge.", "name": "icon" } ], "members": [ { "kind": "field", "name": "type", "type": { "text": "'warning' | 'success' | 'danger' | 'highlight' | 'info' | 'neutral' | 'progress' | undefined" }, "description": "The type of badge.\nDetermines the background color of the badge.", "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.", "default": "\"neutral\"", "attribute": "type", "reflects": true }, { "kind": "field", "name": "variant", "type": { "text": "'warning' | 'success' | 'danger' | 'highlight' | 'neutral' | 'info' | undefined" }, "description": "The style variant of the badge.\nDetermines the background color of the badge.", "default": "\"neutral\"", "attribute": "variant", "reflects": true }, { "kind": "field", "name": "strong", "type": { "text": "boolean" }, "default": "false", "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.", "attribute": "strong", "reflects": true } ], "attributes": [ { "name": "type", "type": { "text": "'warning' | 'success' | 'danger' | 'highlight' | 'info' | 'neutral' | 'progress' | undefined" }, "description": "The type of badge.\nDetermines the background color of the badge.", "deprecated": "Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.", "default": "\"neutral\"", "fieldName": "type" }, { "name": "variant", "type": { "text": "'warning' | 'success' | 'danger' | 'highlight' | 'neutral' | 'info' | undefined" }, "description": "The style variant of the badge.\nDetermines the background color of the badge.", "default": "\"neutral\"", "fieldName": "variant" }, { "name": "strong", "type": { "text": "boolean" }, "default": "false", "description": "Strong badges are a secondary style for badges.\nThey provide more visual prominence and emphasize them.", "fieldName": "strong" } ], "superclass": { "name": "LitElement", "package": "lit" }, "localization": [], "status": "ready", "category": "text", "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n
\n\n### Do\n\n- Use established variants and color patterns so that users can clearly identify the importance level.\n- Use to show a status update on a piece of information or action.\n- Use to mark something as a “draft” or “new”.\n- Use when you want to highlight something that has been added recently.\n- Always position badge so that it’s easy to understand what object it’s related to.\n\n
\n
\n\n### Don’t\n\n- Don’t make badges clickable. Instead use button component’s small variant.\n- Don’t use alternatives to existing badge variants.\n- Don't use badges for labeling, categorizing, or organizing objects. Use the [tag component](/components/tag/) instead.\n\n
\n\n---\n\n## Content guidelines\n\nBadge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:\n\n
Complete
\n
Action completed
\n\nWhen writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n
Partially refunded
\n
Partially Refunded
\n\nAvoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:\n\n
Pending
\n
Item is pending
\n\nAlways describe the status in the past tense:\n\n
Refunded
\n
Refund
\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name | Purpose |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| `neutral` | The default style variant. |\n| `info` | Used to convey general information that isn’t critical. |\n| `success` | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful. |\n| `highlight` | Used to highlight specific items in the interface, like notifications. |\n| `danger` | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |\n| `warning` | Used to display information that needs a user’s attention attention and may require further steps. |\n| `progress` | Used to convey something that’s in progress. |\n", "examples": [], "dependencies": [], "tagName": "nord-badge", "customElement": true } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "Badge", "module": "src/badge/Badge.ts" } }, { "kind": "custom-element-definition", "name": "nord-badge", "declaration": { "name": "Badge", "module": "src/badge/Badge.ts" } } ] }, { "kind": "javascript-module", "path": "src/button/Button.stories.ts", "declarations": [ { "kind": "variable", "name": "meta", "type": { "text": "Meta" }, "default": "{ title: 'Components/Button', component: 'nord-button', tags: ['autodocs'], argTypes: { variant: { control: 'select', options: ['default', 'primary', 'dashed', 'plain', 'danger'], }, size: { control: 'select', options: ['s', 'm', 'l'], }, href: { control: 'text' }, download: { control: 'boolean' }, target: { control: 'select', options: ['_self', '_blank', '_parent', '_top'], }, expand: { control: 'boolean' }, square: { control: 'boolean' }, loading: { control: 'boolean' }, hideDropdownIcon: { control: 'boolean' }, disabled: { control: 'boolean' }, name: { control: 'text' }, value: { control: 'text' }, content: { control: 'text' }, }, parameters: { controls: { disable: true } }, }" }, { "kind": "variable", "name": "Playground", "type": { "text": "Story" }, "default": "{ parameters: { controls: { disable: false } }, args: { content: 'Button', variant: 'default', size: 'm', download: false, target: '_self', expand: false, square: false, loading: false, hideDropdownIcon: false, disabled: false, }, render: args => html` ${args.content} `, }" }, { "kind": "variable", "name": "ButtonAsLink", "type": { "text": "Story" }, "default": "{ render: () => html` Default Primary Danger Filter Plain Disabled `, }" }, { "kind": "variable", "name": "ButtonWithDropdownButHideIcon", "type": { "text": "Story" }, "default": "{ render: () => html` Create new Patient record User record `, }" }, { "kind": "variable", "name": "ButtonWithDropdown", "type": { "text": "Story" }, "default": "{ render: () => html` Create new Patient record User record `, }" }, { "kind": "variable", "name": "CustomBackground", "type": { "text": "Story" }, "default": "{ render: () => html` Primary Default Plain `, }" }, { "kind": "variable", "name": "Disabled", "type": { "text": "Story" }, "default": "{ render: () => html`Disabled`, }" }, { "kind": "variable", "name": "Expanded", "type": { "text": "Story" }, "default": "{ render: () => html` Default Primary Danger Filter Plain Disabled `, }" }, { "kind": "variable", "name": "IconOnly", "type": { "text": "Story" }, "default": "{ render: () => html` `, }" }, { "kind": "variable", "name": "LargeButtons", "type": { "text": "Story" }, "default": "{ render: () => html` Default Primary Danger Filter Plain Disabled `, }" }, { "kind": "variable", "name": "LoadingInteractivity", "type": { "text": "Story" }, "default": "{ render: () => { const container = document.createElement('div') container.innerHTML = `Export ` const group = container.querySelector('nord-toast-group') const button = container.querySelector('nord-button') group.addEventListener('dismiss', e => e.target.remove()) button.addEventListener('click', () => { if (button.loading) { return } button.loading = true group.addToast('Exporting data…', { autoDismiss: 3000 }) // Timeout exists for demo purposes to mimic server response time setTimeout(() => { button.loading = false group.addToast('Data exported', { autoDismiss: 3000 }) }, 2000) }) return container }, }" }, { "kind": "variable", "name": "Loading", "type": { "text": "Story" }, "default": "{ render: () => html` Default Primary Danger Filter Plain Disabled `, }" }, { "kind": "variable", "name": "Slots", "type": { "text": "Story" }, "default": "{ render: () => html` Start slot End slot `, }" }, { "kind": "variable", "name": "SmallButtons", "type": { "text": "Story" }, "default": "{ render: () => html` Default Primary Danger Filter Small Disabled `, }" }, { "kind": "variable", "name": "WithIcon", "type": { "text": "Story" }, "default": "{ render: () => html` Contribute on GitHub `, }" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "meta", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "Playground", "declaration": { "name": "Playground", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "ButtonAsLink", "declaration": { "name": "ButtonAsLink", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "ButtonWithDropdownButHideIcon", "declaration": { "name": "ButtonWithDropdownButHideIcon", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "ButtonWithDropdown", "declaration": { "name": "ButtonWithDropdown", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "CustomBackground", "declaration": { "name": "CustomBackground", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "Disabled", "declaration": { "name": "Disabled", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "Expanded", "declaration": { "name": "Expanded", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "IconOnly", "declaration": { "name": "IconOnly", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "LargeButtons", "declaration": { "name": "LargeButtons", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "LoadingInteractivity", "declaration": { "name": "LoadingInteractivity", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "Loading", "declaration": { "name": "Loading", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "Slots", "declaration": { "name": "Slots", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "SmallButtons", "declaration": { "name": "SmallButtons", "module": "src/button/Button.stories.ts" } }, { "kind": "js", "name": "WithIcon", "declaration": { "name": "WithIcon", "module": "src/button/Button.stories.ts" } } ] }, { "kind": "javascript-module", "path": "src/button/Button.ts", "declarations": [ { "kind": "class", "description": "Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.", "name": "Button", "cssProperties": [ { "description": "Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).", "name": "--n-button-border-radius", "default": "var(--n-border-radius-s)" }, { "description": "Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).", "name": "--n-button-gap", "default": "var(--n-space-s)" }, { "description": "Controls the overlayed gradient background on the button.", "name": "--n-button-gradient", "default": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))" }, { "description": "Controls the background color of the button, using our [color tokens](/tokens/#color).", "name": "--n-button-background-color", "default": "var(--n-color-button)" }, { "description": "Controls the border color of the button, using our [color tokens](/tokens/#color).", "name": "--n-button-border-color", "default": "var(--n-color-border-strong)" }, { "description": "Controls the text alignment for the text in the button.", "name": "--n-button-text-align", "default": "center" }, { "description": "Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).", "name": "--n-button-box-shadow", "default": "var(--n-box-shadow)" }, { "description": "Controls the color of the text within the button, using our [color tokens](/tokens/#color).", "name": "--n-button-color", "default": "var(--n-color-text)" }, { "description": "Controls the inline, or left and right, padding of the button.", "name": "--n-button-padding-inline", "default": "calc(var(--n-space-m) / 1.2)" }, { "description": "Controls the size of the text within the button, using our [font tokens](/tokens/#font).", "name": "--n-button-font-size", "default": "var(--n-font-size-m)" }, { "description": "Controls the weight of the text within the button, using our [font tokens](/tokens/#font).", "name": "--n-button-font-weight", "default": "var(--n-font-weight)" }, { "description": "Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).", "name": "--n-button-min-block-size", "default": "var(--n-space-xl)" }, { "description": "Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.", "name": "--n-button-toggle-icon-color", "default": "var(--n-color-icon)" }, { "description": "Controls the text selection behavior of the button text.", "name": "--n-button-user-select", "default": "none" } ], "slots": [ { "description": "The button content", "name": "" }, { "description": "Used to place content at the start of button text. Typically used for icons.", "name": "start" }, { "description": "Used to place content at the end of button text. Typically used for icons.", "name": "end" } ], "members": [ { "kind": "field", "name": "defaultSlot", "privacy": "private", "default": "new SlotController(this)" }, { "kind": "field", "name": "buttonRef", "privacy": "private" }, { "kind": "field", "name": "events", "privacy": "private", "default": "new EventController(this)" }, { "kind": "field", "name": "lightDom", "privacy": "private", "default": "new LightDomController(this, { render: () => this.renderLightDom(), })" }, { "kind": "field", "name": "variant", "type": { "text": "'default' | 'primary' | 'dashed' | 'plain' | 'danger'" }, "default": "'default'", "description": "The style variant of the button.", "attribute": "variant", "reflects": true }, { "kind": "field", "name": "type", "type": { "text": "'button' | 'submit' | 'reset'" }, "default": "'submit'", "description": "The type of the button.", "attribute": "type", "reflects": true }, { "kind": "field", "name": "size", "type": { "text": "'s' | 'm' | 'l'" }, "default": "'m'", "description": "The size of the button.\nThis affects font-size and padding.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "accessibleExpanded", "type": { "text": "'true' | 'false' | undefined" }, "description": "This does not need to be documented,\nsince it is only for forwarding the aria-expanded attribute\nto the internal button element.", "privacy": "private", "attribute": "aria-expanded" }, { "kind": "field", "name": "accessibleHasPopup", "type": { "text": "| 'false'\n | 'true'\n | 'menu'\n | 'listbox'\n | 'tree'\n | 'grid'\n | 'dialog' | undefined" }, "description": "This does not need to be documented,\nsince it is only for forwarding the aria-haspopup attribute\nto the internal button element.", "privacy": "private", "attribute": "aria-haspopup" }, { "kind": "field", "name": "href", "type": { "text": "string | undefined" }, "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.", "attribute": "href", "reflects": true }, { "kind": "field", "name": "download", "type": { "text": "boolean" }, "default": "false", "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.", "attribute": "download", "reflects": true }, { "kind": "field", "name": "target", "type": { "text": "'_self' | '_blank' | '_parent' | '_top'" }, "default": "'_self'", "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.", "attribute": "target" }, { "kind": "field", "name": "expand", "type": { "text": "boolean" }, "default": "false", "description": "Controls whether the button expands to fill the width of its container.", "attribute": "expand", "reflects": true }, { "kind": "field", "name": "square", "type": { "text": "boolean" }, "default": "false", "description": "When provided, the button is rendered as a square button. Use this for icon only buttons.", "attribute": "square", "reflects": true }, { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.", "attribute": "loading", "reflects": true }, { "kind": "field", "name": "hideDropdownIcon", "type": { "text": "boolean" }, "default": "false", "description": "Controls whether the `interface-dropdown-small` icon from Nordicons is hidden\nin the `end` slot when used as a dropdown toggle.", "attribute": "hide-dropdown-icon", "reflects": true }, { "kind": "method", "name": "renderLink", "privacy": "private", "parameters": [ { "name": "innards", "type": { "text": "TemplateResult" } } ], "description": "We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\nLinks cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\nAlong with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order." }, { "kind": "method", "name": "renderButton", "privacy": "private", "parameters": [ { "name": "innards", "type": { "text": "TemplateResult" } } ] }, { "kind": "method", "name": "renderLightDom", "privacy": "private" }, { "kind": "field", "name": "handleOuterClick", "privacy": "private" }, { "kind": "method", "name": "handleClick", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "handleProxyChange", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ], "description": "React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\nSo we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.", "attribute": "disabled", "reflects": true, "inheritedFrom": { "name": "InputMixin", "module": "src/common/mixins/InputMixin.ts" } }, { "kind": "field", "name": "name", "type": { "text": "string | undefined" }, "description": "The name of the form component.", "attribute": "name", "reflects": true, "inheritedFrom": { "name": "InputMixin", "module": "src/common/mixins/InputMixin.ts" } }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "The value of the form component.", "attribute": "value", "inheritedFrom": { "name": "InputMixin", "module": "src/common/mixins/InputMixin.ts" } }, { "kind": "field", "name": "formAncestor", "type": { "text": "HTMLFormElement | null" }, "privacy": "private", "default": "null", "inheritedFrom": { "name": "InputMixin", "module": "src/common/mixins/InputMixin.ts" } }, { "kind": "field", "name": "_formId", "type": { "text": "string | undefined" }, "privacy": "protected", "inheritedFrom": { "name": "InputMixin", "module": "src/common/mixins/InputMixin.ts" } }, { "kind": "field", "name": "form", "type": { "text": "HTMLFormElement | null" }, "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.", "attribute": "form", "inheritedFrom": { "name": "InputMixin", "module": "src/common/mixins/InputMixin.ts" } }, { "kind": "field", "name": "focusableRef", "privacy": "protected", "inheritedFrom": { "name": "FocusableMixin", "module": "src/common/mixins/FocusableMixin.ts" } }, { "kind": "method", "name": "focus", "parameters": [ { "name": "options", "optional": true, "type": { "text": "FocusOptions" }, "description": "An object which controls aspects of the focusing process." } ], "description": "Programmatically move focus to the component.", "inheritedFrom": { "name": "FocusableMixin", "module": "src/common/mixins/FocusableMixin.ts" } }, { "kind": "method", "name": "blur", "description": "Programmatically remove focus from the component.", "inheritedFrom": { "name": "FocusableMixin", "module": "src/common/mixins/FocusableMixin.ts" } }, { "kind": "method", "name": "click", "description": "Programmatically simulates a click on the component.", "inheritedFrom": { "name": "FocusableMixin", "module": "src/common/mixins/FocusableMixin.ts" } } ], "attributes": [ { "name": "variant", "type": { "text": "'default' | 'primary' | 'dashed' | 'plain' | 'danger'" }, "default": "'default'", "description": "The style variant of the button.", "fieldName": "variant" }, { "name": "type", "type": { "text": "'button' | 'submit' | 'reset'" }, "default": "'submit'", "description": "The type of the button.", "fieldName": "type" }, { "name": "size", "type": { "text": "'s' | 'm' | 'l'" }, "default": "'m'", "description": "The size of the button.\nThis affects font-size and padding.", "fieldName": "size" }, { "name": "aria-expanded", "type": { "text": "'true' | 'false' | undefined" }, "description": "This does not need to be documented,\nsince it is only for forwarding the aria-expanded attribute\nto the internal button element.", "fieldName": "accessibleExpanded" }, { "name": "aria-haspopup", "type": { "text": "| 'false'\n | 'true'\n | 'menu'\n | 'listbox'\n | 'tree'\n | 'grid'\n | 'dialog' | undefined" }, "description": "This does not need to be documented,\nsince it is only for forwarding the aria-haspopup attribute\nto the internal button element.", "fieldName": "accessibleHasPopup" }, { "name": "href", "type": { "text": "string | undefined" }, "description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.", "fieldName": "href" }, { "name": "download", "type": { "text": "boolean" }, "default": "false", "description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.", "fieldName": "download" }, { "name": "target", "type": { "text": "'_self' | '_blank' | '_parent' | '_top'" }, "default": "'_self'", "description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.", "fieldName": "target" }, { "name": "expand", "type": { "text": "boolean" }, "default": "false", "description": "Controls whether the button expands to fill the width of its container.", "fieldName": "expand" }, { "name": "square", "type": { "text": "boolean" }, "default": "false", "description": "When provided, the button is rendered as a square button. Use this for icon only buttons.", "fieldName": "square" }, { "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Controls whether the button is in loading state. Please note that the spinner\nis hidden from assistive technologies, so you need to make sure to announce\nthe loading state to e.g. screen reader users. We also recommend disabling\nall user interactions on the button itself while in loading state.", "fieldName": "loading" }, { "name": "hide-dropdown-icon", "type": { "text": "boolean" }, "default": "false", "description": "Controls whether the `interface-dropdown-small` icon from Nordicons is hidden\nin the `end` slot when used as a dropdown toggle.", "fieldName": "hideDropdownIcon" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.", "fieldName": "disabled", "inheritedFrom": { "name": "InputMixin", "module": "src/common/mixins/InputMixin.ts" } }, { "name": "name", "type": { "text": "string | undefined" }, "description": "The name of the form component.", "fieldName": "name", "inheritedFrom": { "name": "InputMixin", "module": "src/common/mixins/InputMixin.ts" } }, { "name": "value", "type": { "text": "string" }, "default": "''", "description": "The value of the form component.", "fieldName": "value", "inheritedFrom": { "name": "InputMixin", "module": "src/common/mixins/InputMixin.ts" } }, { "name": "form", "type": { "text": "HTMLFormElement | null" }, "description": "Gets the form, if any, associated with the form element.\nThe setter accepts a string, which is the id of the form.", "fieldName": "form", "inheritedFrom": { "name": "InputMixin", "module": "src/common/mixins/InputMixin.ts" } } ], "mixins": [ { "name": "InputMixin", "module": "/src/common/mixins/InputMixin.js" }, { "name": "FocusableMixin", "module": "/src/common/mixins/FocusableMixin.js" } ], "superclass": { "name": "LitElement", "package": "lit" }, "localization": [], "status": "ready", "category": "action", "readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n
\n\n### Do\n\n- Only use one primary button per section, as a main call-to-action.\n- Use clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n
\n
\n\n### Don’t\n\n- Don't use a primary button in every row of a table.\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\n\n
\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n
View user settings
\n
Click here
\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n
My tasks
\n
My Tasks
\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n
Add item
\n
Add an item
\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name | Purpose |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default` | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element. |\n| `primary` | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action. |\n| `dashed` | Dashed style should be used for actions that trigger filtering. |\n| `danger` | Danger style should be used for actions that delete data or otherwise make it hard to undo the action. |\n| `plain` | Used for less important or less common actions. Can be also used for linking to other pages. |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n\n---\n\n## Icon usage in button\n\nIllustrative icons should be always positioned in the `start` slot:\n\n\"Button\n\"Button\n\nWhen a button is used as a dropdown toggle, the `interface-dropdown-small` icon from [Nordicons](/nordicons/) is automatically placed in the `end` slot (you can use the `hideDropdownIcon` property to hide it):\n\n\"Dropdown\n\nEach button size has a recommended icon size. The medium button uses the `s` icon size, the [small button](/components/button/?example=small+buttons) uses the `xs` icon size, and the [large button](/components/button/?example=large+buttons) uses the `m` icon size. The icon will adjust size automatically based on the button size, so you will get the correct behavior by default. However, this can be overridden by explicitly setting a size on the icon.\n\n\"Button\n\"Button\n\nUse `interface-add-small` icon in the `start` slot for create/add type primary actions in the [header](/components/header/):\n\n\"Create/add\n\"Create/add\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `` tag instead of a `