sl-alert

Alerts are used to display important messages inline or as toast notifications.

Properties
name	type	default	description	attribute	reflects	static
dependencies	{ "text": "object" }	{ 'sl-icon-button': SlIconButton }	-	-	-	true
base	{ "text": "HTMLElement" }	-	-	-	-	-
open	{ "text": "boolean" }	false	Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.	open	true	-
closable	{ "text": "boolean" }	false	Enables a close button that allows the user to dismiss the alert.	closable	true	-
variant	{ "text": "'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger'" }	'primary'	The alert's theme variant.	variant	true	-
duration	-	Infinity	The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning the alert will not close on its own.	duration	-	-

Attributes
name	default	description	fieldName	type	resolveInitializer
open	false	Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.	open	{ "text": "boolean" }	-
closable	false	Enables a close button that allows the user to dismiss the alert.	closable	{ "text": "boolean" }	-
variant	'primary'	The alert's theme variant.	variant	{ "text": "'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger'" }	-
duration	Infinity	The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning the alert will not close on its own.	duration	-	{ "module": "src/components/alert/alert.component.ts" }

CSS Parts
name	description
base	The component's base wrapper.
icon	The container that wraps the optional icon.
message	The container that wraps the alert's main content.
close-button	The close button, an `<sl-icon-button>`.
close-button__base	The close button's exported `base` part.

Slots
name	description
	The alert's main content.
icon	An icon to show in the alert. Works best with `<sl-icon>`.

Events
name	description	reactName	eventName
sl-show	Emitted when the alert opens.	onSlShow	SlShowEvent
sl-after-show	Emitted after the alert opens and all animations are complete.	onSlAfterShow	SlAfterShowEvent
sl-hide	Emitted when the alert closes.	onSlHide	SlHideEvent
sl-after-hide	Emitted after the alert closes and all animations are complete.	onSlAfterHide	SlAfterHideEvent

Methods
name	description
handleOpenChange	-
handleDurationChange	-
show	Shows the alert.
hide	Hides the alert
toast	Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by calling this method again. The returned promise will resolve after the alert is hidden.

sl-avatar

Avatars are used to represent a person or object.

Properties
name	type	default	description	attribute	static	reflects
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon }	-	-	true	-
image	{ "text": "string" }	''	The image source to use for the avatar.	image	-	-
label	{ "text": "string" }	''	A label to use to describe the avatar to assistive devices.	label	-	-
initials	{ "text": "string" }	''	Initials to use as a fallback when no image is available (1-2 characters max recommended).	initials	-	-
loading	{ "text": "'eager' \| 'lazy'" }	'eager'	Indicates how the browser should load the image.	loading	-	-
shape	{ "text": "'circle' \| 'square' \| 'rounded'" }	'circle'	The shape of the avatar.	shape	-	true

Attributes
name	type	default	description	fieldName
image	{ "text": "string" }	''	The image source to use for the avatar.	image
label	{ "text": "string" }	''	A label to use to describe the avatar to assistive devices.	label
initials	{ "text": "string" }	''	Initials to use as a fallback when no image is available (1-2 characters max recommended).	initials
loading	{ "text": "'eager' \| 'lazy'" }	'eager'	Indicates how the browser should load the image.	loading
shape	{ "text": "'circle' \| 'square' \| 'rounded'" }	'circle'	The shape of the avatar.	shape

CSS Properties
name	description
--size	The size of the avatar.

CSS Parts
name	description
base	The component's base wrapper.
icon	The container that wraps the avatar's icon.
initials	The container that wraps the avatar's initials.
image	The avatar image. Only shown when the `image` attribute is set.

Slots
name	description
icon	The default icon to use when no image or initials are present. Works best with `<sl-icon>`.

Methods
name
handleImageChange

sl-breadcrumb

Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.

Properties
name	type	default	static	description	attribute
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon }	true	-	-
defaultSlot	{ "text": "HTMLSlotElement" }	-	-	-	-
separatorSlot	{ "text": "HTMLSlotElement" }	-	-	-	-
label	{ "text": "string" }	''	-	The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by screen readers and other assistive devices to provide more context for users.	label

Attributes
name	type	default	description	fieldName
label	{ "text": "string" }	''	The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by screen readers and other assistive devices to provide more context for users.	label

CSS Parts
name	description
base	The component's base wrapper.

Slots
name	description
	One or more breadcrumb items to display.
separator	The separator to use between breadcrumb items. Works best with `<sl-icon>`.

name	type	description	attribute	default
href	{ "text": "string \| undefined" }	Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered internally. When unset, a button will be rendered instead.	href	-
target	{ "text": "'_blank' \| '_parent' \| '_self' \| '_top' \| undefined" }	Tells the browser where to open the link. Only used when `href` is set.	target	-
rel	{ "text": "string" }	The `rel` attribute to use on the link. Only used when `href` is set.	rel	'noreferrer noopener'

name	type	description	fieldName	default
href	{ "text": "string \| undefined" }	Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered internally. When unset, a button will be rendered instead.	href	-
target	{ "text": "'_blank' \| '_parent' \| '_self' \| '_top' \| undefined" }	Tells the browser where to open the link. Only used when `href` is set.	target	-
rel	{ "text": "string" }	The `rel` attribute to use on the link. Only used when `href` is set.	rel	'noreferrer noopener'

name	description
	The breadcrumb item's label.
prefix	An optional prefix, usually an icon or icon button.
suffix	An optional suffix, usually an icon or icon button.
separator	The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.

name	type	description	default	attribute	reflects
defaultSlot	{ "text": "Promise" }	-	-	-	-
name	{ "text": "string" }	The name of the built-in animation to use. For custom animations, use the `keyframes` prop.	'none'	name	-
play	{ "text": "boolean" }	Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when the animation finishes or gets canceled.	false	play	true
delay	{ "text": "number" }	The number of milliseconds to delay the start of the animation.	0	delay	-
direction	{ "text": "PlaybackDirection" }	Determines the direction of playback as well as the behavior when reaching the end of an iteration. [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)	'normal'	direction	-
duration	{ "text": "number" }	The number of milliseconds each iteration of the animation takes to complete.	1000	duration	-
easing	{ "text": "string" }	The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function such as `cubic-bezier(0, 1, .76, 1.14)`.	'linear'	easing	-
endDelay	{ "text": "number" }	The number of milliseconds to delay after the active period of an animation sequence.	0	end-delay	-
fill	{ "text": "FillMode" }	Sets how the animation applies styles to its target before and after its execution.	'auto'	fill	-
iterations	-	The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.	Infinity	iterations	-
iterationStart	{ "text": "number" }	The offset at which to start the animation, usually between 0 (start) and 1 (end).	0	iteration-start	-
keyframes	{ "text": "Keyframe[] \| undefined" }	The keyframes to use for the animation. If this is set, `name` will be ignored.	-	-	-
playbackRate	{ "text": "number" }	Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This value can be changed without causing the animation to restart.	1	playback-rate	-
currentTime	{ "text": "CSSNumberish" }	Gets and sets the current animation time.	-	-	-

name	default	description	fieldName	type	resolveInitializer
name	'none'	The name of the built-in animation to use. For custom animations, use the `keyframes` prop.	name	{ "text": "string" }	-
play	false	Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when the animation finishes or gets canceled.	play	{ "text": "boolean" }	-
delay	0	The number of milliseconds to delay the start of the animation.	delay	{ "text": "number" }	-
direction	'normal'	Determines the direction of playback as well as the behavior when reaching the end of an iteration. [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)	direction	{ "text": "PlaybackDirection" }	-
duration	1000	The number of milliseconds each iteration of the animation takes to complete.	duration	{ "text": "number" }	-
easing	'linear'	The easing function to use for the animation. This can be a Shoelace easing function or a custom easing function such as `cubic-bezier(0, 1, .76, 1.14)`.	easing	{ "text": "string" }	-
end-delay	0	The number of milliseconds to delay after the active period of an animation sequence.	endDelay	{ "text": "number" }	-
fill	'auto'	Sets how the animation applies styles to its target before and after its execution.	fill	{ "text": "FillMode" }	-
iterations	Infinity	The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops.	iterations	-	{ "module": "src/components/animation/animation.component.ts" }
iteration-start	0	The offset at which to start the animation, usually between 0 (start) and 1 (end).	iterationStart	{ "text": "number" }	-
playback-rate	1	Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This value can be changed without causing the animation to restart.	playbackRate	{ "text": "number" }	-

name	description	reactName	eventName
sl-cancel	Emitted when the animation is canceled.	onSlCancel	SlCancelEvent
sl-finish	Emitted when the animation finishes.	onSlFinish	SlFinishEvent
sl-start	Emitted when the animation starts or restarts.	onSlStart	SlStartEvent

name	description
handleAnimationChange	-
handlePlayChange	-
handlePlaybackRateChange	-
cancel	Clears all keyframe effects caused by this animation and aborts its playback.
finish	Sets the playback time to the end of the animation corresponding to the current playback direction.

name	type	description	attribute	default	reflects	readonly	static
dependencies	{ "text": "object" }	-	-	{ 'sl-icon': SlIcon, 'sl-spinner': SlSpinner }	-	-	true
button	{ "text": "HTMLButtonElement \| HTMLLinkElement" }	-	-	-	-	-	-
invalid	{ "text": "boolean" }	-	-	false	-	-	-
title	{ "text": "string" }	-	title	''	-	-	-
variant	{ "text": "'default' \| 'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger' \| 'text'" }	The button's theme variant.	variant	'default'	true	-	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	The button's size.	size	'medium'	true	-	-
caret	{ "text": "boolean" }	Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.	caret	false	true	-	-
disabled	{ "text": "boolean" }	Disables the button.	disabled	false	true	-	-
loading	{ "text": "boolean" }	Draws the button in a loading state.	loading	false	true	-	-
outline	{ "text": "boolean" }	Draws an outlined button.	outline	false	true	-	-
pill	{ "text": "boolean" }	Draws a pill-style button with rounded edges.	pill	false	true	-	-
circle	{ "text": "boolean" }	Draws a circular icon button. When this attribute is present, the button expects a single `<sl-icon>` in the default slot.	circle	false	true	-	-
type	{ "text": "'button' \| 'submit' \| 'reset'" }	The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.	type	'button'	-	-	-
name	{ "text": "string" }	The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter. This attribute is ignored when `href` is present.	name	''	-	-	-
value	{ "text": "string" }	The value of the button, submitted as a pair with the button's name as part of the form data, but only when this button is the submitter. This attribute is ignored when `href` is present.	value	''	-	-	-
href	{ "text": "string" }	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.	href	''	-	-	-
target	{ "text": "'_blank' \| '_parent' \| '_self' \| '_top'" }	Tells the browser where to open the link. Only used when `href` is present.	target	-	-	-	-
rel	{ "text": "string" }	When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a specific tab/window, this will prevent that from working correctly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively.	rel	'noreferrer noopener'	-	-	-
download	{ "text": "string \| undefined" }	Tells the browser to download the linked file as this filename. Only used when `href` is present.	download	-	-	-	-
form	{ "text": "string" }	The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The value of this attribute must be an id of a form in the same document or shadow root as the button.	form	-	-	-	-
formAction	{ "text": "string" }	Used to override the form owner's `action` attribute.	formaction	-	-	-	-
formEnctype	{ "text": "'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'" }	Used to override the form owner's `enctype` attribute.	formenctype	-	-	-	-
formMethod	{ "text": "'post' \| 'get'" }	Used to override the form owner's `method` attribute.	formmethod	-	-	-	-
formNoValidate	{ "text": "boolean" }	Used to override the form owner's `novalidate` attribute.	formnovalidate	-	-	-	-
formTarget	{ "text": "'_self' \| '_blank' \| '_parent' \| '_top' \| string" }	Used to override the form owner's `target` attribute.	formtarget	-	-	-	-
validity	-	Gets the validity state object	-	-	-	true	-
validationMessage	-	Gets the validation message	-	-	-	true	-

name	description
	The button's label.
prefix	A presentational prefix icon or similar element.
suffix	A presentational suffix icon or similar element.

name	description	reactName	eventName
sl-blur	Emitted when the button loses focus.	onSlBlur	SlBlurEvent
sl-focus	Emitted when the button gains focus.	onSlFocus	SlFocusEvent
sl-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	onSlInvalid	SlInvalidEvent

name	type	description	fieldName
src	{ "text": "string" }	The path to the image to load.	src
alt	{ "text": "string" }	A description of the image used by assistive devices.	alt
play	{ "text": "boolean" }	Plays the animation. When this attribute is remove, the animation will pause.	play

name	description
--control-box-size	The size of the icon box.
--icon-size	The size of the play/pause icons.

name	description
play-icon	Optional play icon to use instead of the default. Works best with `<sl-icon>`.
pause-icon	Optional pause icon to use instead of the default. Works best with `<sl-icon>`.

name	description	reactName	eventName
sl-load	Emitted when the image loads successfully.	onSlLoad	SlLoadEvent
sl-error	Emitted when the image fails to load.	onSlError	SlErrorEvent

name	type	default	description	attribute
defaultSlot	{ "text": "HTMLSlotElement" }	-	-	-
disableRole	{ "text": "boolean" }	false	-	-
label	{ "text": "string" }	''	A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive devices when interacting with the control and is strongly recommended.	label

name	description
--border-color	The card's border color, including borders that occur inside the card.
--border-radius	The border radius for the card's edges.
--border-width	The width of the card's borders.
--padding	The padding to use for the card's sections.

name	description
	The card's main content.
header	An optional header for the card.
footer	An optional footer for the card.
image	An optional image to render at the start of the card.

name	type	default	description	fieldName
loop	{ "text": "boolean" }	false	When set, allows the user to navigate the carousel in the same direction indefinitely.	loop
navigation	{ "text": "boolean" }	false	When set, show the carousel's navigation.	navigation
pagination	{ "text": "boolean" }	false	When set, show the carousel's pagination indicators.	pagination
autoplay	{ "text": "boolean" }	false	When set, the slides will scroll automatically when the user is not interacting with them.	autoplay
autoplay-interval	{ "text": "number" }	3000	Specifies the amount of time, in milliseconds, between each automatic scroll.	autoplayInterval
slides-per-page	{ "text": "number" }	1	Specifies how many slides should be shown at a given time.	slidesPerPage
slides-per-move	{ "text": "number" }	1	Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page` greater than one. It can't be higher than `slides-per-page`.	slidesPerMove
orientation	{ "text": "'horizontal' \| 'vertical'" }	'horizontal'	Specifies the orientation in which the carousel will lay out.	orientation
mouse-dragging	{ "text": "boolean" }	false	When set, it is possible to scroll through the slides by dragging them with the mouse.	mouseDragging

name	description	default
--slide-gap	The space between each slide.	-
--aspect-ratio	The aspect ratio of each slide.	16/9
--scroll-hint	The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.	-

name	description
base	The carousel's internal wrapper.
scroll-container	The scroll container that wraps the slides.
pagination	The pagination indicators wrapper.
pagination-item	The pagination indicator.
pagination-item--active	Applied when the item is active.
navigation	The navigation wrapper.
navigation-button	The navigation button.
navigation-button--previous	Applied to the previous button.
navigation-button--next	Applied to the next button.

name	description
	The carousel's main content, one or more `<sl-carousel-item>` elements.
next-icon	Optional next icon to use instead of the default. Works best with `<sl-icon>`.
previous-icon	Optional previous icon to use instead of the default. Works best with `<sl-icon>`.

name	description
base	The component's base wrapper.
control	The square container that wraps the checkbox's checked state.
control--checked	Matches the control part when the checkbox is checked.
control--indeterminate	Matches the control part when the checkbox is indeterminate.
checked-icon	The checked icon, an `<sl-icon>` element.
indeterminate-icon	The indeterminate icon, an `<sl-icon>` element.
label	The container that wraps the checkbox's label.
form-control-help-text	The help text's wrapper.

name	description
	The checkbox's label.
help-text	Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.

name	description	reactName	eventName
sl-blur	Emitted when the checkbox loses focus.	onSlBlur	SlBlurEvent
sl-change	Emitted when the checked state changes.	onSlChange	SlChangeEvent
sl-focus	Emitted when the checkbox gains focus.	onSlFocus	SlFocusEvent
sl-input	Emitted when the checkbox receives input.	onSlInput	SlInputEvent
sl-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	onSlInvalid	SlInvalidEvent

name	type	description	default	attribute	reflects	readonly	static
dependencies	{ "text": "object" }	-	{ 'sl-button-group': SlButtonGroup, 'sl-button': SlButton, 'sl-dropdown': SlDropdown, 'sl-icon': SlIcon, 'sl-input': SlInput, 'sl-visually-hidden': SlVisuallyHidden }	-	-	-	true
base	{ "text": "HTMLElement" }	-	-	-	-	-	-
input	{ "text": "SlInput" }	-	-	-	-	-	-
dropdown	{ "text": "SlDropdown" }	-	-	-	-	-	-
previewButton	{ "text": "HTMLButtonElement" }	-	-	-	-	-	-
trigger	{ "text": "HTMLButtonElement" }	-	-	-	-	-	-
value	{ "text": "string" }	The current value of the color picker. The value's format will vary based the `format` attribute. To get the value in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form data.	''	value	-	-	-
defaultValue	{ "text": "string" }	The default value of the form control. Primarily used for resetting the form control.	''	-	-	-	-
label	{ "text": "string" }	The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to display HTML, you can use the `label` slot` instead.	''	label	-	-	-
format	{ "text": "'hex' \| 'rgb' \| 'hsl' \| 'hsv'" }	The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color picker will accept user input in any format (including CSS color names) and convert it to the desired format.	'hex'	format	-	-	-
inline	{ "text": "boolean" }	Renders the color picker inline rather than in a dropdown.	false	inline	true	-	-
size	{ "text": "'small' \| 'medium' \| 'large'" }	Determines the size of the color picker's trigger. This has no effect on inline color pickers.	'medium'	size	true	-	-
noFormatToggle	{ "text": "boolean" }	Removes the button that lets users toggle between format.	false	no-format-toggle	-	-	-
name	{ "text": "string" }	The name of the form control, submitted as a name/value pair with form data.	''	name	-	-	-
disabled	{ "text": "boolean" }	Disables the color picker.	false	disabled	true	-	-
hoist	{ "text": "boolean" }	Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	false	hoist	-	-	-
opacity	{ "text": "boolean" }	Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.	false	opacity	-	-	-
uppercase	{ "text": "boolean" }	By default, values are lowercase. With this attribute, values will be uppercase instead.	false	uppercase	-	-	-
swatches	{ "text": "string \| string[]" }	One or more predefined color swatches to display as presets in the color picker. Can include any format the color picker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a semicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.	''	swatches	-	-	-
form	{ "text": "string" }	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	''	form	true	-	-
required	{ "text": "boolean" }	Makes the color picker a required field.	false	required	true	-	-
validity	-	Gets the validity state object	-	-	-	true	-
validationMessage	-	Gets the validation message	-	-	-	true	-

sl-alert

Alerts are used to display important messages inline or as toast notifications.

sl-avatar

Avatars are used to represent a person or object.

sl-breadcrumb

Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.

sl-breadcrumb-item

Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.

sl-badge

Badges are used to draw attention and display statuses or counts.

sl-animation

Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).

sl-button

Buttons represent actions that are available to the user.

sl-animated-image

A component for displaying animated GIFs and WEBPs that play and pause on interaction.

sl-button-group

Button groups can be used to group related buttons into sections.

sl-card

Cards can be used to group related subjects in a container.

sl-carousel

Carousels display an arbitrary number of content slides along a horizontal or vertical axis.

sl-carousel-item

A carousel item represent a slide within a [carousel](/components/carousel).

sl-checkbox

Checkboxes allow the user to toggle an option on or off.

sl-color-picker

Color pickers allow the user to select a color.

sl-copy-button

Copies text data to the clipboard when the user clicks the trigger.

sl-details

Details show a brief summary and expand to show additional content.

sl-dialog

Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.

sl-divider

Dividers are used to visually separate or group elements.

sl-drawer

Drawers slide in from a container to expose additional options and information.

sl-dropdown

Dropdowns expose additional content that "drops down" in a panel.

sl-format-bytes

Formats a number as a human readable bytes value.

sl-format-date

Formats a date/time using the specified locale and options.

sl-format-number

Formats a number using the specified locale and options.

sl-icon

Icons are symbols that can be used to represent various options within an application.

sl-icon-button

Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.

sl-image-comparer

Compare visual differences between similar photos with a sliding panel.

sl-include

Includes give you the power to embed external HTML files into the page.

sl-input

Inputs collect data from the user.

sl-menu

Menus provide a list of options for the user to choose from.

sl-menu-item

Menu items provide options for the user to pick from in a menu.

sl-menu-label

Menu labels are used to describe a group of menu items.

sl-mutation-observer

The Mutation Observer component offers a thin, declarative interface to the [`MutationObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).

sl-option

Options define the selectable items within various form controls such as [select](/components/select).

sl-popup

Popup is a utility that lets you declaratively anchor "popup" containers to another element.

sl-progress-bar

Progress bars are used to show the status of an ongoing operation.

sl-progress-ring

Progress rings are used to show the progress of a determinate operation in a circular fashion.

sl-radio

Radios allow the user to select a single option from a group.

sl-qr-code

Generates a [QR code](https://www.qrcode.com/) and renders it using the [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).

sl-radio-button

Radios buttons allow the user to select a single option from a group using a button-like control.

sl-radio-group

Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.

name	description
--grid-width	The width of the color grid.
--grid-height	The height of the color grid.
--grid-handle-size	The size of the color grid's handle.
--slider-height	The height of the hue and alpha sliders.
--slider-handle-size	The diameter of the slider's handle.
--swatch-size	The size of each predefined color swatch.

name	description	reactName	eventName
sl-blur	Emitted when the color picker loses focus.	onSlBlur	SlBlurEvent
sl-change	Emitted when the color picker's value changes.	onSlChange	SlChangeEvent
sl-focus	Emitted when the color picker receives focus.	onSlFocus	SlFocusEvent
sl-input	Emitted when the color picker receives input.	onSlInput	SlInputEvent
sl-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	onSlInvalid	SlInvalidEvent

name	type	default	description	attribute	static	reflects
dependencies	{ "text": "object" }	{ 'sl-icon': SlIcon, 'sl-tooltip': SlTooltip }	-	-	true	-
copyIcon	{ "text": "HTMLSlotElement" }	-	-	-	-	-
successIcon	{ "text": "HTMLSlotElement" }	-	-	-	-	-
errorIcon	{ "text": "HTMLSlotElement" }	-	-	-	-	-
tooltip	{ "text": "SlTooltip" }	-	-	-	-	-
isCopying	{ "text": "boolean" }	false	-	-	-	-
status	{ "text": "'rest' \| 'success' \| 'error'" }	'rest'	-	-	-	-
value	{ "text": "string" }	''	The text value to copy.	value	-	-
from	{ "text": "string" }	''	An id that references an element in the same document from which data will be copied. If both this and `value` are present, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an attribute, append the attribute name wrapped in square brackets, e.g. `from="el[value]"`. To copy a property, append a dot and the property name, e.g. `from="el.value"`.	from	-	-
disabled	{ "text": "boolean" }	false	Disables the copy button.	disabled	-	true
copyLabel	{ "text": "string" }	''	A custom label to show in the tooltip.	copy-label	-	-
successLabel	{ "text": "string" }	''	A custom label to show in the tooltip after copying.	success-label	-	-
errorLabel	{ "text": "string" }	''	A custom label to show in the tooltip when a copy error occurs.	error-label	-	-
feedbackDuration	{ "text": "number" }	1000	The length of time to show feedback before restoring the default trigger.	feedback-duration	-	-
tooltipPlacement	{ "text": "'top' \| 'right' \| 'bottom' \| 'left'" }	'top'	The preferred placement of the tooltip.	tooltip-placement	-	-
hoist	{ "text": "boolean" }	false	Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with `overflow: auto\|hidden\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	hoist	-	-

name	description
--success-color	The color to use for success feedback.
--error-color	The color to use for error feedback.

name	description
button	The internal `<button>` element.
copy-icon	The container that holds the copy icon.
success-icon	The container that holds the success icon.
error-icon	The container that holds the error icon.
tooltip__base	The tooltip's exported `base` part.
tooltip__base__popup	The tooltip's exported `popup` part.
tooltip__base__arrow	The tooltip's exported `arrow` part.
tooltip__body	The tooltip's exported `body` part.

name	description
copy-icon	The icon to show in the default copy state. Works best with `<sl-icon>`.
success-icon	The icon to show when the content is copied. Works best with `<sl-icon>`.
error-icon	The icon to show when a copy error occurs. Works best with `<sl-icon>`.

name	description	reactName	eventName
sl-copy	Emitted when the data has been copied.	onSlCopy	SlCopyEvent
sl-error	Emitted when the data could not be copied.	onSlError	SlErrorEvent

name	type	description	fieldName	default
open	{ "text": "boolean" }	Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.	open	false
summary	{ "text": "string" }	The summary to show in the header. If you need to display HTML, use the `summary` slot instead.	summary	-
disabled	{ "text": "boolean" }	Disables the details so it can't be toggled.	disabled	false

name	description
	The details' main content.
summary	The details' summary. Alternatively, you can use the `summary` attribute.
expand-icon	Optional expand icon to use instead of the default. Works best with `<sl-icon>`.
collapse-icon	Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.

name	description	reactName	eventName
sl-show	Emitted when the details opens.	onSlShow	SlShowEvent
sl-after-show	Emitted after the details opens and all animations are complete.	onSlAfterShow	SlAfterShowEvent
sl-hide	Emitted when the details closes.	onSlHide	SlHideEvent
sl-after-hide	Emitted after the details closes and all animations are complete.	onSlAfterHide	SlAfterHideEvent