Icon Button

Version 0.9.0-next.31 for Svelte Kit ^1.0.1

IconButton

The IconButton is a circular button. It's best used in places like a Header, CardHeader, and TableRow. They have some cool features like the option to show a dropdown, which is useful for overflow options like you would find in the last cell of a TableRow.

Props

id string
You can pass in an ID to the component if you need to reference it later. If you do not pass an ID, there will be a unique id added to the component.

icon string more
You can pass an icon for the button. Import an svg icon as a variable reference it. There are a few bundled common icons you can select from, listed in the table below.

color string primary
Pass in one of the named color variables like success or error-light.

onclick function
Pass a function that you would like to run when this button is clicked

href string
If this button will taking a user to a different page, use href instead of directing them to the page with onclick. This will prefetch the data on hover to make the navigation faster.

options array<object>
Pass true if you want this button to open the page contents in a new page.

If you add options, you'll get a dropdown of those options.

Show Details


option[].label `string` The text the user sees for the option
option[].value `string` The value that will be added for the url query param
option[].caption `string` More details to give about the option
option[].img `string` An image that will be displayed on the left of the text
option[].icon `string` An icon to display on the right. Defaults to an arrow. You can remove this by setting this value to null
option[].onselect `function` A function that can be run if this option is selected
option[].hidden `boolean` Will hide the option if set to true, defaults to false
option[].break `boolean` Will create a line break as this option. The line break is not rendered as a clickable option, it's just for aesthetics.
option[].href `string` Will navigate to the new page
option[].new_page `boolean` Used with `href`. If true will open a new tab.

search Boolean
Will transform the button into a search element when clicked. Pairs nicely with the "search" icon you can add. When using search, you can either enter the string into the input and press enter. This will update the query paramiter search with that input, and will trigger the load function to re-run. You can also use the typeahead property, and get a dropdown list of options.

typeahead function(query<String>)
This is a function that will provide one input, which is whatever data is entered into the search string. It expects a promise to be returned with an Array of options in the format of options, just like in the "Show Details" summary above.

more

add

arrowLeft

arrowRight

close

search

edit

trash

filter

<script>
  import { IconButton, showLoading, hideLoading } from "bubbles-ui";

  const iconButtonOptions = [
    {
      label: "Option 1",
      caption: "onclick example",
      onclick: (event) => {
        //because we are targeting the dropdown component
        //and not settings an ID in the icon button, we'll
        //need to pull it's dynamic ID from the DOM
        const icon_button_id = event.currentTarget.parentElement.parentElement.parentElement.querySelector("button").id;

        showLoading(icon_button_id);

        setTimeout(() => {
          hideLoading(icon_button_id);
        }, 2000);
      },
    },
    {
      label: "Option 2",
      caption: "href example",
      href: "#",
    },
  ];

  const onclick = (event) => {
    //here the click event is the actual button click
    //so we can get the id for the button from the event
    const id = event.currentTarget.id;
    showLoading(id);

    setTimeout(() => {
      hideLoading(id);
    }, 2000);
  };
</script>

<div class="flex">
  <IconButton icon="more" options={iconButtonOptions} />
  <code>more</code>
</div>
<div class="flex">
  <IconButton icon="add" options={iconButtonOptions} />
  <code>add</code>
</div>
<div class="flex">
  <IconButton icon="arrowLeft" {onclick} />
  <code>arrowLeft</code>
</div>
<div class="flex">
  <IconButton icon="arrowRight" {onclick} />
  <code>arrowRight</code>
</div>
<div class="flex">
  <IconButton icon="close" options={iconButtonOptions} />
  <code>close</code>
</div>
<div class="flex">
  <IconButton icon="search" options={iconButtonOptions} />
  <code>search</code>
</div>
<div class="flex">
  <IconButton icon="edit" options={iconButtonOptions} />
  <code>edit</code>
</div>
<div class="flex">
  <IconButton icon="trash" options={iconButtonOptions} />
  <code>trash</code>
</div>
<div class="flex">
  <IconButton icon="filter" options={iconButtonOptions} />
  <code>filter</code>
</div>

<style>
  .flex {
    display: flex;
    align-items: center;
  }
</style>

<script>
  //This is the example for adding the icon buttons into the Header or CardHeader component.

  import { Header, fuzzySearch } from "bubbles-ui";
  import sections from "$docs/utils/sidebar-sections"; //Just for the demo, since there is a search element here

  const props = {
    title: "IconButton", //This will automatically set the page title for you unless you overwrite it with svelte:head
    buttons: [
      {
        icon: "search",
        color: "gray-lighter",
        search: true,
        typeahead: (input) => {
          const filtered = fuzzySearch(input, sections, { keys: ["id"], sort: true });

          return Promise.resolve(
            filtered.map((obj) => {
              return { label: obj.label, value: obj.id, href: `/${obj.id}`, new_page: false }; //Returns a dropdown component like a select with a label and value props
            })
          );
        },
      },
      {
        icon: "more",
        color: "gray-lighter",
        options: [
          {
            label: "Option 1",
            caption: "This is an option caption",
          },
          {
            label: "Option 2",
            caption: "This is an example with onclick",
          },
        ],
      },
    ],
  };
</script>

<Header {...props} />

IconButton

Props

Colors