{"id":21462042,"url":"https://github.com/bhuebschen/fab-card","last_synced_at":"2025-10-10T06:04:38.044Z","repository":{"id":244384982,"uuid":"815058624","full_name":"bhuebschen/fab-card","owner":"bhuebschen","description":"The FAB Card is a custom Lovelace card for Home Assistant that allows you to place a floating action-button.","archived":false,"fork":false,"pushed_at":"2024-08-15T20:07:10.000Z","size":20,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-15T22:00:15.921Z","etag":null,"topics":["dashboard","floating-action-button","home-assistant","lovelace-custom-card"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bhuebschen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-14T09:04:51.000Z","updated_at":"2024-08-15T20:06:19.000Z","dependencies_parsed_at":"2024-06-14T12:00:48.542Z","dependency_job_id":"cda41f2b-172d-4fe9-9dc8-00ac36d1b795","html_url":"https://github.com/bhuebschen/fab-card","commit_stats":null,"previous_names":["bhuebschen/fab-card"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuebschen%2Ffab-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuebschen%2Ffab-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuebschen%2Ffab-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuebschen%2Ffab-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhuebschen","download_url":"https://codeload.github.com/bhuebschen/fab-card/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226012288,"owners_count":17559651,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dashboard","floating-action-button","home-assistant","lovelace-custom-card"],"created_at":"2024-11-23T07:12:20.263Z","updated_at":"2025-10-10T06:04:37.938Z","avatar_url":"https://github.com/bhuebschen.png","language":"JavaScript","funding_links":["https://github.com/sponsors/bhuebschen"],"categories":[],"sub_categories":[],"readme":"# FAB Card\n\n[![hacs][hacs-image]][hacs-url]\n[![GitHub Sponsors][gh-sponsors-image]][gh-sponsors-url]\n\nThe FAB Card is a custom Lovelace card for Home Assistant that allows you to place a floating action-button. This card provides a visually appealing way to access common actions or navigate to different parts of your Home Assistant dashboard.\n\n### Features:\n\n- **Customization:** Configure the icons, colors, and positions of the floating button to match your dashboard's theme.\n- **Advanced Positioning:** Supports placement in bottom-left, bottom-right, top-left, top-right, middle-left, middle-right, middle-top, and middle-bottom.\n- **Animation Support:** Uses Animate.css to add visual effects like fade, slide-in, bounce, and more.\n- **Disabled State:** Prevents interactions when disabled, visually dimmed.\n\n### Installation:\n\n### [HACS](hacs) (Home Assistant Community Store)\n\n1. Go to HACS page on your Home Assistant instance\n1. Add this repository (https://github.com/bhuebschen/fab-card) via HACS Custom repositories [How to add Custom Repositories](https://hacs.xyz/docs/faq/custom_repositories/)\n1. Select `Frontend`\n1. Press add icon and search for `FAB Card`\n1. Select FAB Card repo and install\n1. Force refresh the Home Assistant page (\u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eF5\u003c/kbd\u003e / (\u003ckbd\u003eShift\u003c/kbd\u003e +) \u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eR\u003c/kbd\u003e)\n1. Add fab-card to your page\n\n[![Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=bhuebschen\u0026repository=fab-card\u0026category=plugin)\n\n### Manual\n\n1. Download the 'fab-card.js' from the latest [release][release-url] (with right click, save link as)\n1. Place the downloaded file on your Home Assistant machine in the `config/www` folder (when there is no `www` folder in the folder where your `configuration.yaml` file is, create it and place the file there)\n1. In Home Assistant go to `Configuration-\u003eLovelace Dashboards-\u003eResources` (When there is no `resources` tag on the `Lovelace Dashboard` page, enable advanced mode in your account settings, and retry this step)\n1. Add a new resource\n   1. Url = `/local/fab-card.js.js`\n   1. Resource type = `module`\n1. Force refresh the Home Assistant page (\u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eF5\u003c/kbd\u003e / (\u003ckbd\u003eShift\u003c/kbd\u003e +) \u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eR\u003c/kbd\u003e)\n1. Add fab-card to your page\n\n### Configuration:\n\nHere's an example configuration for the FAB Card:\n\n```yaml\ntype: 'custom:fab-card'\nbutton_color: '#FF5722'\nicon_color: '#FFFFFF'\nactive_color: '#2257FF'\nicon: 'mdi:menu'\naction:\n  action: navigate\n  navigation_path: '/lovelace/1'\n# Example for service call:\n# action:\n#   action: call-service\n#   service: light.turn_on\n#   service_data:\n#     entity_id: light.living_room\nentity: light.living_room\npositive_states:\n  - 'on'\n  - 'home'\nposition: 'bottom-left'\ndisabled: false\nanimation: 'bounce'\n```\n\n### Options:\n\n## Options\n\n| Name                   | Type    | Requirement  | Description                                                                                 | Default                                                                                                  |\n| ---------------------- | ------- | ------------ | ------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |\n| type                   | string  | **Required** | `custom:fab-card`                                                                           |                                                                                                          |\n| button_color           | string  | **Optional** | Background color of the button                                                              | `--primary-color`                                                                                        |\n| icon_color             | string  | **Optional** | Color of the icon                                                                           | `--text-primary-color`                                                                                   |\n| active_color           | string  | **Optional** | Background color of the button when active                                                  | `--accent-color`                                                                                         |\n| icon                   | string  | **Required** | Icon to display on the FAB button                                                           | `mdi:menu`                                                                                               |\n| action                 | object  | **Required** | Action to perform when the button is clicked                                                |                                                                                                          |\n| action.action          | string  | **Required** | Type of action (`navigate`, `call-service`, `more-info`, `fire-dom-event`, `assist`, `url`) |                                                                                                          |\n| action.navigation_path | string  | **Optional** | Path to navigate to (required if action is `navigate`)                                      |                                                                                                          |\n| action.service         | string  | **Optional** | Service to call (required if action is `call-service`)                                      |                                                                                                          |\n| action.service_data    | object  | **Optional** | Data to include with the service call (required if action is `call-service`)                |                                                                                                          |\n| action.url_path        | string  | **Optional** | URL to navigate to (required if action is `url`)                                            |\n| action.target          | string  | **Optional** | Sets the target-frame/window/tab of the URL (optional if action is `url`)                   |\n| entity                 | string  | **Optional** | Entity to monitor for state changes                                                         |                                                                                                          |\n| positive_states        | list    | **Optional** | List of states considered positive                                                          | `['true', 'on', 'open', 'active', 'detected', 'occupied', 'unlocked', 'home', 'above_horizon', 'ready']` |\n| position               | string  | **Optional** | Sets the button position (bottom-left, bottom-right, top-left, etc.)                        | `bottom-right`                                                                                           |\n| animation              | string  | **Optional** | Animation type (fade, slide-in, bounce, etc. - see: https://animate.style/                  | `none`                                                                                                   |\n| disabled               | boolean | **Optional** | Disables the button (no interaction)                                                        | `false`                                                                                                  |\n|                        |\n| offset_x               | string  | **Optional** | Horizontal offset from the default position                                                 | `0px`                                                                                                    |\n| offset_y               | string  | **Optional** | Vertical offset from the default position                                                   | `0px`                                                                                                    |\n| icon_offset_x          | string  | **Optional** | Horizontal offset for the icon inside the button                                            | `0px`                                                                                                    |\n| icon_offset_y          | string  | **Optional** | Vertical offset the icon inside the button                                                  | `0px`                                                                                                    |\n\n### Usage:\n\nAfter installation, you can add the fab-card to your Lovelace dashboard using the sample configuration provided above. Customize the card by setting the desired options in your YAML configuration\n\n### Animations:\n\nTo enable animations, you need to add \"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\" to your Dashboard resources (Settings -\u003e Dashboards, \"⋮\" -\u003e Resources, \"+ ADD RESOURCE\" -\u003e Stylesheet)\n\n### Issues \u0026 Contributions:\n\nIf you encounter any issues or have suggestions for improvements, feel free to [open an issue](https://github.com/bhuebschen/fab-card/issues) or submit a pull request.\n\n## License\n\nMIT © [Benedikt Hübschen][bhuebschen]\n\n\u003c!-- Badges --\u003e\n\n[hacs-url]: https://github.com/hacs/integration\n[hacs-image]: https://img.shields.io/badge/hacs-custom-orange.svg?style=flat-square\n[gh-sponsors-url]: https://github.com/sponsors/bhuebschen\n[gh-sponsors-image]: https://img.shields.io/github/sponsors/bhuebschen?style=flat-square\n\n\u003c!-- References --\u003e\n\n[home-assistant]: https://www.home-assistant.io/\n[hacs]: https://hacs.xyz\n[latest-release]: https://github.com/bhuebschen/fab-card/releases/latest\n[ha-scripts]: https://www.home-assistant.io/docs/scripts/\n[edit-readme]: https://github.com/bhuebschen/fab-card/edit/master/README.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhuebschen%2Ffab-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhuebschen%2Ffab-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhuebschen%2Ffab-card/lists"}