Shoelace Components

This package simplifies the use of Shoelace library web components. For better component preview, visit sl.toddle.site in a separate tab.

Theme:

All Components

Changelog

Components

Components

Alert

Animation

Avatar

Badge

Breadcrumb

Button

Carousel

Checkbox

Color Picker

Copy Button

Details (Accordion)

Dialog

Drawer

Dropdown

Icon

Icon Button

Image Comparer

Menu

Progress Bar

Progress Ring

QR Code

Range Slider

Rating

Select

Skeleton

Spinner

Split Panel

Switch

Tabs

Tag

Tooltip

Tree

*For feedback or bug reports, contact me on Discord: kamilnader

Components

  • Alert

    Alerts are used to display important messages.

    Success!

    I will be gone based on duration set!

    This is super informative

    You can tell by how pretty the alert is.

    Your changes have been saved

    You can safely exit the app now.

    Your settings have been updated

    Settings will take effect on next login.

    Your session has ended

    Please login again to continue.

    Your account has been deleted

    We’re very sorry to see you go!

    Show Alert

    Attributes

    show-icon Boolean value: "true" = show icon. "false" = hide icon.
    icon Icon name: Find your icon here: icons.getbootstrap.com
    theme "light" or "dark".
    isopen Boolean ("true"/ "false"). Show or Hide on page load.
    Variant Choose between: ("primary", "success", "neutral", "warning", "danger").
    closable Boolean ("true"/"false"). Show or hide close icon.
    id Set the ID of alert (Useful for Toast effect).

    Actions

    showAlert Action accepts id of alert. Upon calling the action, the alert will show. Tip: Set the parent element of the alert to fixed to have the toast effect.
  • Animation

    Animate any element.

    SL BUTTON

    Animate text

    Attributes

    name Animation name. Animations are based on those found in the popular Animate.css library: https://animate.style/
    play Boolean ("true", "false"). Play on load.
    easing Example: "easeInOut".
    duration In milliseconds.
    iterations number to repeat.

    Avatar

    Avatars are used to represent a person or object.

    Attributes

    show-icon Boolean ("true"/"false").
    icon Icon name: Find your icon here: icons.getbootstrap.com
    image URL of the image.
    label For assistive devices.
    shape Choose between: "rounded", "square", "circle".
    theme "light" or "dark".
    initials Instead of icon or image you can also use Initials. Example: (KN).

    Badge

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

    Primary
    Success
    Neutral
    Warning
    Danger
    1
    2
    3
    4
    5
    Primary
    Success
    Neutral
    Warning
    Danger
    19 Requests
    5 Warnings
    3 Errors

    Attributes

    pill Boolean value. Draws a pill-style badge with rounded edges.
    pulse Boolean value. Makes the badge pulsate to draw attention.
    theme "light" or "dark".
    variant Choose between: ("primary", "success", "neutral", "warning", "danger").
    slot This is only used if the badge is nested within another Shoelace component. For example: within the Menu Item component, it can be placed to the left as "prefix" and to the right as "suffix.

    Breadcrumb

    Breadcrumbs provide a group of links so users can easily navigate a website’s hierarchy. You can use icon component for changing default separator.

    Home Articles Traveling Documents Security Traveling First Second Third

    Attributes (breadcrumb)

    theme light or dark.
    label 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.

    Attributes (breadcrumb-item)

    href 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.
    target Tells the browser where to open the link. Only used when href is set. Choose between: '_blank' | '_parent' | '_self' | '_top' | undefined
    rel The rel attribute to use on the link. Only used when href is set. Defualt is: 'noreferrer noopener'

    Button

    Buttons represent actions that are available to the user.

    Default Primary Success Neutral Warning Danger

    Attributes

    icon Empty no icon or pass the Icon name: Find your icon here: icons.getbootstrap.com
    icon-position "left" or "right".
    link This adds href attribute, which will make the component render an <a> under the hood. This gives you all the default link behavior the browser provides (e.g. CMD/CTRL/SHIFT + CLICK) and exposes the target and download attributes.
    size Choose between: "small", "medium", "large".
    shape Choose between: "pill" and "circle".
    theme "dark" or "light".
    loading Boolean ("true"/ "false"). Draws the button in a loading state.
    outline Boolean ("true"/ "false"). Draws an outlined button.
    variant Choose between: ("primary", "success", "neutral", "warning", "danger").
    disabled Boolean ("true"/ "false"). Disables the button.
    download_file_name Name of the file downloaded.
    link_open_new_tab Boolean ("true"/ "false").
    class You can add a custom class to the button.
    id You can add a custom id to the button.
    slot Example usage: when a button is a child of a dropdown component, the slot attribute should be set to "trigger""

    Events

    click Button click event

    Carousel

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

    The sun shines on the mountains and trees (by Adam Kool on Unsplash) The sun shines on the mountains and trees (by Adam Kool on Unsplash) The sun shines on the mountains and trees (by Adam Kool on Unsplash) The sun shines on the mountains and trees (by Adam Kool on Unsplash)

    Attributes

    loop Boolean value. When set, allows the user to navigate the carousel in the same direction indefinitely.
    style Use the --aspect-ratio custom property to customize the size of the carousel’s viewport from the default value of 16/9.
    --aspect-ratio: 3/2; or --aspect-ratio: 1/1;
    theme "light" or "dark".
    images Array of images
    autoplay Boolean value. The carousel will automatically advance when the autoplay attribute is used.
    navigation Boolean value. When set, show the carousel’s navigation.
    pagination Boolean value. When set, show the carousel’s pagination indicators.
    slides-per-move Advance more than once slide at a time.
    slides-per-page Specifies how many slides should be shown at a given time.
    autoplay-interval Specifies the amount of time, in milliseconds, between each automatic scroll.

    Events (Coming soon)

    eventName Description of event

    Checkbox

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

    Checkbox Checkbox Checkbox

    Attributes

    size Choose between: "small", "medium", "large".
    theme "light" or "dark".
    checked Boolean value. Draws the checkbox in a checked state.
    indeterminate Boolean value. Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a “select all/none” behavior when associated checkboxes have a mix of checked and unchecked states.
    disabled Boolean value. Disables the checkbox.
    help-text The checkbox’s help text. If you need to display HTML, use the help-text slot instead.
    required Makes the checkbox a required field.
    class Add class name for additional styling.

    Events

    checked Emitted when the checked state changes.
    Output: True or False

    Color Picker

    Color pickers allow the user to select a color.

    Attributes

    size Choose between: "small", "medium", "large".
    label The color picker’s label. This will not be displayed, but it will be announced by assistive devices.
    theme "light" or "dark".
    value The current value of the color picker.
    format Valid options include hex, rgb, hsl, and hsv.
    inline Renders the color picker inline rather than in a dropdown.
    swatches 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 (;).
    show-opacity Boolean (true, false). Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.

    Events

    sl-change Emitted when the color picker’s value changes.

    Copy Button

    Copies text data to the clipboard when the user clicks the trigger. Color is taken from the parent element.

    Attributes

    value_to_copy Copies text data to the clipboard when the user clicks the trigger.
    copy_from_id You can copy content from other elements on the page by passing the id of the element. If you want to copy the value of the input element, then pass the id.value. If you want to copy the link from a tag, then enter id.[href]
    disabled Boolean ("true"/ "false"). Disables the copy button.
    custom_icons Boolean ("true"/ "false"). Enables option to add custom icon for copy-icon, error-icon and success-icon.
    copy-icon The icon to show in the default copy state. icons.getbootstrap.com
    error-icon The icon to show when a copy error occurs. icons.getbootstrap.com
    success-icon The icon to show when the content is copied. icons.getbootstrap.com
    copy-tooltip Copy buttons displayed feedback in a tooltip. You can customize the label when hover or click.
    error-tooltip Copy buttons displayed feedback in a tooltip. You can customize the label when there is an error.
    success_tooltip Copy buttons displayed feedback in a tooltip. You can customize the label when there is a success.

    Events (Coming soon)

    eventName Description of event

    Details

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

    This is a paragraph of text

    This is a paragraph of text

    This is a paragraph of text

    Attributes

    theme "light" or "dark".
    sumarry The summary to show in the header. If you need to display HTML, use the summary slot instead.
    disabled Boolean ("true"/ "false"). Disables the details so it can’t be toggled.
    accordion-logic Boolean ("true"/ "false"). Details are designed to function independently, but you can simulate a group or “accordion” where only one is shown at a time.

    Dialog (Modal)

    Dialogs, sometimes called “modals”, appear above the page and require the user’s immediate attention.

    Close

    This is a paragraph of text

    Open Dialog

    To trigger dialog you need to put button next to dialog component. After that you can nest dialog main content inside dialog component. You can also nest button and set it's slot to "footer". This will Close the dialog on button click. You can also nest icon-button component and set it's slot to "header-actions". This will add aditional links in the header. When using slots that are not default, use components slots attributes instead of toddle slots feature

    Attributes

    theme "light" or "dark".
    label The dialog’s label as displayed in the header. You should always include a relevant label. If you need to display HTML, use the label slot instead. The label inherits color from parent element.
    style --width The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
    --header-spacing The amount of padding to use for the header.
    --body-spacing The amount of padding to use for the body.
    --footer-spacing The amount of padding to use for the footer.
    id Dialog ID. Useful for Actions for opening and closing.

    Actions

    • openDialogByID

      Open dialog

      Arguments

      id dialog id
    • hideDialogById

      Hide dialog. Useful for hiding dialog inside dialog. Or having a flow of dialogs.

      Arguments

      id dialog id
    Next Step
    Close Dialog

    Drawer

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

    This is a paragraph of text

    Close
    Open Drawer

    This is a paragraph of text

    Close
    Open Drawer

    This is a paragraph of text

    Close
    Open Drawer

    This is a paragraph of text

    Close
    Open Drawer

    To trigger drawer you need to put button next to drawer component. After that you can nest drawer's main content inside drawer component. You can also nest button and set it's slot to "footer". This will Close the drawer on button click. You can also nest icon-button component and set it's slot to "header-actions". This will add aditional links in the header. When using slots that are not default, use components slots attributes instead of toddle slots feature

    Attributes

    theme "light" or "dark".
    label The drawer's label as displayed in the header. You should always include a relevant label. If you need to display HTML, use the label slot instead. The label inherits color from parent element.
    placement The direction from which the drawer will open. 'top' | 'end' | 'bottom' | 'start'. Default is 'end'.
    style --size The preferred size of the drawer. This will be applied to the drawer’s width or height depending on its placement. Note that the drawer will shrink to accommodate smaller screens.
    --header-spacing The amount of padding to use for the header.
    --body-spacing The amount of padding to use for the body.
    --footer-spacing The amount of padding to use for the footer.
    id Drawer ID. Useful for Actions for opening and closing.

    Actions

    • openDrawerById

      Open drawer

      Arguments

      id drawer id
    • hideDrawerById

      Hide drawer. Useful for hiding drawer inside drawer. Or having a flow of drawers.

      Arguments

      id drawer id
    Next step
    Close

    Dropdown

    Dropdowns expose additional content that “drops down” in a panel.

    Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.

    Undo Redo