NV Elements Catalog Starters Repo System Themes About Getting Started Changelog Metrics Support Accessibility Contributions Requests Migration Deprecations Integrations Installation MCP CLI Lint Angular Bundles Extensions Go Hugo Import Maps Lit NextJS Nuxt Preact React SolidJS Svelte TypeScript Vue Foundations Typography Iconography Themes Design Tokens Size & Space Objects Interactions Support Status Color Animation Fonts Layers Custom Layout Horizontal Vertical Grid Popovers i18n Visualization View Transitions Elements Accordion Alert Avatar Badge Breadcrumb Button Button Group Card Chat Message Checkbox Color Combobox Copy Button Datagrid Integrations Column Action Column Alignment Column Fixed Column width Container Card Display Settings Footer Heatmap Keynav Multi Select Pagination Panel Detail Panel Grid Performance Placeholder Row Action Row Groups Row Sort Scroll Height Single Select Stripe Date Datetime Dialog Divider Dot Drawer Dropdown Dropdown Group Dropzone File Forms Validation Actions Control Icon Icon Button Input Input Group Logo Menu Month Notification Page Page Header Page Loader Pagination Panel Progressive Filter Chip Progress Bar Progress Ring Password Preferences Input Pulse Radio Range Resize Handle Search Select Skeleton Sort Button Sparkline Star Rating Steps Switch Tabs Tag Textarea Time Toast Toggletip Toolbar Tooltip Tree Week Patterns Authentication Browse Dashboard Editor Empty States Heatmap Keyboard Shortcut Logging Media Onboarding Panel Responsive Search Subheader Trend Code Codeblock Monaco Input Diff Input Editor Diff Editor Problems Markdown Markdown CSS Utility Labs Responsive Layout Viewport Container Patterns Forms API Design Properties & Attributes Slots Registration CustomEvents Stateless Composition Styles Packaging Glossary Logs Internal Guidelines Agent Harness Documentation Examples TypeScript Testing Unit Testing Accessibility Testing Lighthouse Testing SSR Testing Visual Testing Troubleshooting Component Creation Internal Examples All Examples

Glossary

Below are the common base properties that define the consistent API definition and language for all components, based on the W3C and ARIA Patterns specifications.

Properties

Property Description Type disabled This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) - `true` - The element has a disabled state and does not accept interaction. - `false` - The element has an enabled state and accepts interaction.
boolean
active Indicates whether the element is currently actively engaged through user interaction. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:active) - `true` - The user is pressing or activating the element (mousedown, keydown, or touch). - `false` - No active user engagement on the element.
boolean
expanded Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) - `true` - The associated content expands and becomes visible to the user. - `false` - The associated content collapses and hides from the user.
boolean
pressed Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) - `true` - The button is in the pressed (on) state and the associated action or setting is active. - `false` - The button is in the unpressed (off) state and the associated action or setting is inactive.
boolean
selected Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) - `true` - The element holds selection and represents the user's current choice within the group. - `false` - The element does not hold selection and the user can choose it.
boolean
readonly Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) - `true` - The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` - The element allows editing and the user can change its value through interaction.
boolean
value Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value)
string
name The name of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name)
string
closable Indicates whether the user can dismiss or close the element. - `true` - The element displays a close control and the user can dismiss it. - `false` - The user cannot close the element and must dismiss it programmatically.
boolean
i18n Enables updating internal string values for internationalization.
Partial
current Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) - `page` - Marks the current page within a set of navigation links. - `step` - Marks the current step within a multi-step process or workflow.
pagestep
inlinePosition Controls the horizontal alignment of the element within its container, respecting the text direction. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `start` - Aligns the element to the beginning of the inline axis (left in LTR, right in RTL). - `center` - Centers the element along the inline axis for balanced visual positioning. - `end` - Aligns the element to the end of the inline axis (right in LTR, left in RTL).
startcenterend
blockPosition Controls the vertical alignment of the element within its container. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `start` - Aligns the element to the top of the block axis for top-aligned positioning. - `center` - Centers the element along the block axis for balanced vertical positioning. - `end` - Aligns the element to the bottom of the block axis for bottom-aligned positioning.
startcenterend
layout Controls the directional arrangement and spacing behavior of the element's content. - `vertical` - Arranges content in a vertical stack with block-level spacing. - `vertical-inline` - Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` - Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` - Arranges content horizontally with compact inline spacing.
verticalvertical-inlinehorizontalhorizontal-inline
orientation Controls the directional flow of the element's layout and interaction pattern. - `vertical` - Element orients vertically with top-to-bottom flow. - `horizontal` - Element orients horizontally with left-to-right flow.
verticalhorizontal
prominence Controls the visual prominence to establish hierarchy and guide user attention. - `emphasis` - Increases visual weight to draw attention and highlight important elements. - `muted` - Reduces visual weight for supporting content that should remain subtle and unobtrusive.
emphasismuted
interaction The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors. - `emphasis` Shows the interaction targets emphasis or highlighting primary actions. - `destructive` Shows the interaction targets destructive actions such as deleting or removing.
emphasisdestructive
color Defines a base color from the theme color palette
red-cardinalgray-slategray-denimblue-indigoblue-cobaltblue-skyteal-cyangreen-mintteal-seafoamgreen-grassyellow-amberorange-pumpkinred-tomatopink-magentapurple-plumpurple-violetpurple-lavenderpink-rosegreen-jadelime-pearyellow-novabrand-green
status Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` - Highlights important actions or draws attention to primary interactive elements. - `warning` - Indicates cautionary actions that require careful consideration before proceeding. - `success` - Represents positive outcomes, confirmations, or constructive actions. - `danger` - Signals destructive or irreversible actions that need extra attention and confirmation.
accentwarningsuccessdanger
size Controls the visual scale of an element to match its importance and available space. - `sm` - Compact size for dense layouts or secondary elements with less visual prominence. - `md` - Standard size that works well in most contexts and provides balanced visibility. - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.
smmdlg
container Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. - `inset` Element container optimizes for embedding or inset placement inside another containing element. - `full` Element container optimizes for filling its container bounds.
inlineflatinsetfull
position Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout)
top-starttop-endtop-centerbottom-startbottom-endbottom-centerleft-startleft-endleft-centerright-startright-endright-center
alignment Determines the alignment of the popover relative to the provided anchor element.
startendcenter
anchor Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference.
stringHTMLElement
trigger Defines what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.
stringHTMLElement
slots Defines named content areas where users can insert custom markup into the element. - `default` - The primary content area for the element. - `prefix` - Content that appears before the main element content. - `suffix` - Content that appears after the main element content. - `header` - Content that appears at the top of the element, used for titles or introductory information. - `footer` - Content that appears at the bottom of the element, used for supplementary information or actions. - `actions` - Content area specifically for interactive controls like buttons or links. - `icon` - Content area for displaying an icon that represents the element's purpose or state.
defaultprefixsuffixheaderfooteractionsicon
closeTimeout Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading. - `0` - Warning or error messages requiring immediate acknowledgment. - `3000` - Brief success or confirmation messages. - `7000` - Standard informational messages. - `10000` - Messages with actions or requiring user decision.
number
openDelay Sets the delay in milliseconds before the element emits a `open` event. - `0` - Keyboard focus interactions (always immediate for accessibility). - `500` - Dense interfaces with many tooltips to reduce visual noise and prevent accidental triggers.
number
_internals
ElementInternals
render undefined
TemplateResult