// Copyright © SixtyFPS GmbH // SPDX-License-Identifier: MIT import { Elevation } from "./elevation.slint"; import { BaseButton } from "./base_button.slint"; import { Typography } from "../styling/typography.slint"; import { MaterialPalette } from "../styling/material_palette.slint"; import { MaterialStyleMetrics } from "../styling/material_style_metrics.slint"; export component IconButton { in property icon; in property checked_icon: root.icon; in property checkable; in_out property checked; in property tooltip <=> base.tooltip; in property enabled <=> base.enabled; in property inverse; in property inline: false; in property has_error; callback clicked(); accessible-role: button; accessible-enabled: true; accessible-label: root.tooltip; accessible-checkable: root.checkable; accessible-checked: root.checked; accessible-action-default => { base.clicked(); } base := BaseButton { icon: root.checked ? root.checked_icon : root.icon; border_radius: self.height / 2; color: root.has_error ? MaterialPalette.error : root.inverse ? MaterialPalette.inverse_on_surface : MaterialPalette.on_surface_variant; horizontal_padding: 0; vertical_padding: 0; width: self.height; display_background: false; icon_size: root.inline ? MaterialStyleMetrics.icon_size_18 : MaterialStyleMetrics.icon_size_24; min_layout_width: root.inline ? MaterialStyleMetrics.icon_size_18 : MaterialStyleMetrics.size_40; min_layout_height: self.min_layout_width; clip_ripple: !root.inline; clicked => { root.toggle(); root.clicked(); } } function toggle() { if !root.checkable { return; } root.checked = !root.checked; } states [ checked when root.enabled && root.checked : { base.color: MaterialPalette.primary; } ] }