Icon Button
Icon buttons are used to trigger actions with an icon.
Figma Link
- Web Components
- Flutter
Demo
zeta-web v1.4.2
Web Components
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-buttons--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | The name of the icon. Full list of icons can be found at Zeta Icons. | ZetaIconName |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| flavor | Flavor of component.Values:* primary - blue background.* positive - green background.* negative - red background.* outline - primary outline only.* outline-subtle - grey outline only.* text - primary text only.* inverse - black/white background. Note that this flavor is not supported in all components.* subtle - white background with grey text. Same action colors as 'text' flavor.* custom - custom color background with custom color text/icon. | 'primary' | 'positive' | 'negative' | 'outline' | 'outline-subtle' | 'text' | 'subtle' | 'custom' | "primary" | Flavored |
| leadingIcon | Leading icon of button. Full list of icons can be found at https://design.zebra.com/icons | Zeta Icons. | null | 'medium' | 'email' | 'file' | 'image' | 'search' | 'aac_attach' | 'achievement_sync_outline' | 'achievement_sync' | 'activity' | 'add_alert' | 'add_box' | 'add_call' | 'add_circle_outline' | 'add_circle' | 'add_group' | 'add_person' | 'add' | 'add_task' | 'adjustments' | 'ai_attach' | 'ai_measure' | 'ai_single_star' | 'ai_stars' | 'alarm' | 'alert_active' | 'alert_outline' | 'alert' | 'align_center' | 'align_horizontal_center' | 'align_horizontal_left' | 'align_horizontal_right' | 'align_left' | 'align_right' | 'align_vertical_bottom' | 'align_vertical_center' | 'align_vertical_top' | 'analytics' | 'android' | 'antenna' | 'api_collection' | 'api' | 'app_edit' | 'apps' | 'ar' | 'arrow_back' | 'arrow_down' | 'arrow_forward' | 'arrow_up' | 'asp_attach' | 'attach_3ds' | 'attachment' | 'au_attach' | 'audio' | 'audit_activity' | 'auto_delete' | 'auto' | 'average_current_status' | 'avi_attach' | 'award_star' | 'awb' | 'backspace' | 'bad_mood' | 'barcode_bluetooth' | 'barcode_done' | 'barcode_image_scan' | 'barcode_qr_code' | 'barcode' | 'barcode_scanner_down' | 'barcode_settings' | 'basket' | 'battery_alert' | 'battery_charging' | 'battery' | 'bin_attach' | 'block' | 'blog' | 'bluetooth_disabled' | 'bluetooth' | 'bluetooth_searching' | 'bmp_attach' | 'bold' | 'bookmark_outline' | 'bookmark' | 'brightness' | 'broadcast' | 'build' | 'building' | 'bullet_list' | 'bus' | 'cached' | 'cafe' | 'calculator' | 'calendar_3_day' | 'calendar_alt_1' | 'calendar_alt_2' | 'calendar_available' | 'calendar_day' | 'calendar_edit' | 'calendar_gantt' | 'calendar_monthly' | 'calendar_next' | 'calendar_range' | 'calendar_rollover' | 'calendar' | 'calendar_unavailable' | 'calendar_weekly' | 'calendar_yearly' | 'calibrate_media' | 'call_back' | 'camera' | 'camera_shutter' | 'camera_switch' | 'cancel_outline' | 'cancel' | 'car' | 'card_orientation' | 'card_with_chip' | 'caret_down' | 'caret_left' | 'caret_right' | 'caret_sort' | 'caret_up' | 'cast_connected' | 'cast' | 'category' | 'cellular_signal' | 'certificate' | 'certified' | 'chain' | 'chart_bar' | 'chart_bubble_outline' | 'chart_bubble' | 'chart_doughnut' | 'chart_filled' | 'chart_gantt' | 'chart_line_predict' | 'chart_line' | 'chart_line_stacked' | 'chart_outline' | 'chart_pie_outline' | 'chart_pie' | 'chart_scatter_plot' | 'chart_stacked' | 'chart_waterfall' | 'chat_bot' | 'chat_bubble_outline' | 'chat_bubble' | 'chat_message_read' | 'chat_message_unread' | 'chat' | 'chat_search' | 'chat_sync_outline' | 'chat_sync' | 'check_box_empty' | 'check_box' | 'check_circle_outline_alt' | 'check_circle_outline' | 'check_circle' | 'check_mark' | 'checklist' | 'chevron_left' | 'chevron_right' | 'choices' | 'clipboard_outline' | 'clipboard' | 'clock_available' | 'clock_bid' | 'clock_edit' | 'clock_flexible' | 'clock_in_progress' | 'clock_info' | 'clock_missed' | 'clock_on' | 'clock_outline' | 'clock_rollover' | 'clock' | 'clock_segment' | 'clock_start' | 'clock_stop' | 'clock_switch' | 'clock_timer' | 'clock_upcoming' | 'close' | 'closed_caption' | 'cloud_done' | 'cloud_download' | 'cloud_off' | 'cloud_outline' | 'cloud' | 'cloud_sync' | 'cloud_upload' | 'color_fill' | 'columns' | 'com_attach' | 'comms_chat_new' | 'comms_chat' | 'comms_chat_unread' | 'contactless_pay' | 'contacts_outline' | 'contacts' | 'content' | 'contrast' | 'conversation' | 'copy_file' | 'create_new_folder' | 'credit_card' | 'credit_card_swipe' | 'crop' | 'css_attach' | 'csv_attach' | 'currency_dollar' | 'currency_pound' | 'dark_mode' | 'dashboard' | 'dat_attach' | 'dbf_attach' | 'delete_forever' | 'delete_outline' | 'delete_printer' | 'delete' | 'delete_scanner' | 'desktop' | 'device_settings' | 'devices_ecosystem' | 'devices' | 'dialpad' | 'dislike' | 'distribute_horizontal' | 'distribute_vertical' | 'dll_attach' | 'doc_attach' | 'document' | 'docx_attach' | 'dollar' | 'double_arrow_left' | 'double_arrow_right' | 'download' | 'downloading' | 'drop_down_circle' | 'dwg_attach' | 'eas' | 'edit_border' | 'edit' | 'email_alt' | 'email_outline' | 'email_reply_all' | 'eml_attach' | 'end_call' | 'enterprise_diagnostics' | 'environmental' | 'eps_attach' | 'error_outline' | 'error' | 'ethernet' | 'exe_attach' | 'exit' | 'expand_less' | 'expand_more' | 'export' | 'exposure' | 'ext_attach' | 'eye_dropper' | 'eye_preview' | 'face_id' | 'facebook' | 'factory' | 'fast_forward' | 'fast_rewind' | 'filter_alt' | 'filter_off' | 'filter_outlne' | 'filter' | 'finished_download' | 'fire' | 'first_page' | 'fla_attach' | 'flag' | 'flash_auto' | 'flash_off' | 'flash_on' | 'flight_mode' | 'flight' | 'flip' | 'fodg_attach' | 'fodp_attach' | 'fods_attach' | 'folder_outline' | 'folder' | 'font_size_decrease' | 'font_size_increase' | 'format_shapes' | 'forward' | 'frame_inspect' | 'freezer' | 'full_screen_exit' | 'full_screen' | 'gif_attach' | 'gif' | 'glossary' | 'google_drive' | 'grid_off' | 'grid_on' | 'grid_view' | 'group' | 'groups' | 'hamburger_menu_navigation_rail' | 'hamburger_menu' | 'hamburger_menu_thick' | 'hand' | 'happy' | 'hdmi' | 'hdr' | 'headphones' | 'headset' | 'help_outline' | 'help' | 'history' | 'home' | 'home_sync_outline' | 'home_sync' | 'hourglass' | 'how_do_i' | 'htm_attach' | 'html_attach' | 'ico_attach' | 'image_library' | 'import' | 'important_notification' | 'inbox' | 'incoming_call' | 'incoming_video' | 'indent_decrease' | 'indent_increase' | 'indeterminate_check_box' | 'info' | 'ini_attach' | 'instagram' | 'ios_share' | 'iso_attach' | 'iso' | 'issue_audit' | 'italic' | 'jar_attach' | 'jpeg_attach' | 'jpg_attach' | 'js_attach' | 'json_attach' | 'justify' | 'key_attach' | 'keyboard' | 'label' | 'laptop' | 'las' | 'last_page' | 'layers' | 'left_panel_close' | 'left_panel_open' | 'light_mode' | 'light_rail_train' | 'lightbulb' | 'like' | 'line_spacing' | 'link_add' | 'link' | 'linkedin' | 'list_alt' | 'list_bullet_contained' | 'list_feedback' | 'list_form' | 'list' | 'local_mall' | 'local_shipping' | 'locate_scanner' | 'location_off' | 'location_point' | 'location' | 'locations' | 'lock_alt' | 'lock' | 'lock_undo' | 'log_in' | 'log_out' | 'love_outline' | 'love' | 'maintenance' | 'map' | 'mdb_attach' | 'meal' | 'memory' | 'message' | 'microphone_off' | 'microphone_outline' | 'microphone' | 'microsd' | 'missed_call' | 'missed_video' | 'mkv_attach' | 'mobile_friendly' | 'money_euro' | 'money_pound' | 'money_usd' | 'monitor' | 'more_horizontal' | 'more_vertical' | 'mov_attach' | 'mp3_attach' | 'mp4_attach' | 'mpeg_attach' | 'mpg_attach' | 'mpga_attach' | 'my_location' | 'navigate' | 'navigation' | 'near_me' | 'network_signal' | 'neutral' | 'new_chat' | 'nfc' | 'nfo_attach' | 'night' | 'no_color' | 'no_flash' | 'note' | 'notifications_off' | 'numbered_list' | 'obj_attach' | 'odf_attach' | 'odp_attach' | 'ods_attach' | 'odt_attach' | 'oog_attach' | 'open_in_full' | 'open_in_new_window' | 'open_new_off' | 'otf_attach' | 'ott_attach' | 'outgoing_call' | 'outgoing_video' | 'page_detail' | 'page_height' | 'page_rotate' | 'page_width' | 'palette' | 'partner' | 'pause_circle' | 'pause' | 'payment_card' | 'pdf_attach' | 'pending' | 'person_admin' | 'person_assign' | 'person_clock' | 'person_info' | 'person_manager' | 'person_move' | 'person_outline' | 'person' | 'person_search' | 'person_swap' | 'person_walk' | 'phone_android' | 'phone_bluetooth_speaker' | 'phone_in_talk' | 'phone_iphone' | 'phone' | 'phonelink' | 'phrase' | 'pin' | 'pkg_attach' | 'place_outline' | 'place' | 'planogram' | 'play_circle' | 'play_outline' | 'play' | 'png_attach' | 'point_gift' | 'point_heart' | 'point_money' | 'point_scan' | 'point_star' | 'point_token' | 'portrait' | 'pps_attach' | 'ppt_attach' | 'pptx_attach' | 'price_or_dollar' | 'print_configuration_label' | 'print_directory_list' | 'print_test_label' | 'printer' | 'priority_important' | 'priority' | 'priority_urgent' | 'pro' | 'productivity_apps' | 'psd_attach' | 'ptt' | 'publish' | 'push_pin_off' | 'push_pin_outline' | 'push_pin' | 'qr_code' | 'queue' | 'quote_' | 'radio_button_checked' | 'radio_button_unchecked' | 'rar_attach' | 'react_add' | 'react_thumbsup' | 'read' | 'reboot_scanner' | 'recall' | 'receipt' | 'recording' | 'redo' | 'refresh' | 'remove_box' | 'remove_circle_outline' | 'remove_circle' | 'remove_group' | 'remove_person' | 'remove' | 'renew' | 'reorder' | 'repeat' | 'replay' | 'reply' | 'report' | 'reset_network' | 'restart_alt' | 'restart_printer' | 'restore_network_defaults' | 'restore_printer_defaults' | 'retrieve_scanner_settings' | 'review' | 'road_map' | 'rotate_left' | 'rotate_right' | 'rss_feed' | 'rtf_attach' | 'rules' | 'sad' | 'satisfied' | 'save_alt' | 'save' | 'savings' | 'scan_document' | 'scan_rate' | 'scanner' | 'schedule' | 'school' | 'screen_rotation' | 'sd_card' | 'sdc_attach' | 'sdd_attach' | 'search_check_2' | 'search_checkmark' | 'search_data' | 'search_document' | 'search_file' | 'search_image' | 'search_refresh' | 'search_settings' | 'search_star' | 'search_tab' | 'security_check' | 'security' | 'send' | 'server' | 'setting_tool' | 'settings' | 'shape_recognition' | 'share' | 'shared_folder_filled' | 'shared_folder' | 'ship' | 'shopping_basket' | 'side_bar_toggle' | 'sim_card' | 'siren_check' | 'skip_next' | 'skip_previous' | 'slide_show' | 'smart_phone' | 'sms' | 'snooze' | 'solutions' | 'sort' | 'speaker' | 'star_half' | 'star_outline' | 'star' | 'steps' | 'sticker' | 'stop_circle' | 'stop' | 'store_release' | 'store' | 'store_swap' | 'store_transfer' | 'straighten' | 'strategy' | 'strikethrough' | 'subscribe' | 'svg_attach' | 'swap' | 'swf_attach' | 'switch_user' | 'sync_disabled' | 'sync' | 'table' | 'tablet_mac' | 'tablet' | 'tag_outline' | 'tag' | 'tap_to_pay' | 'target' | 'taxi' | 'text_color' | 'tiers' | 'tif_attach' | 'tiff_attach' | 'timecard_approve' | 'timecard' | 'timecard_warning' | 'timer' | 'to_do_outline' | 'to_do' | 'toggle_off' | 'toggle_on' | 'touch' | 'train' | 'transfer' | 'trending_down' | 'trending_up' | 'ttf_attach' | 'tune' | 'tv' | 'twitter' | 'txt_attach' | 'type' | 'uhf_rfid' | 'underline' | 'undo' | 'unfold_less' | 'unfold_more' | 'universal_currency_alt' | 'universal_currency' | 'unlock_alt' | 'unlock' | 'unsubscribe' | 'update' | 'upload_file' | 'upload' | 'usb_alt' | 'usb' | 'user_circle' | 'user_minor' | 'user' | 'user_settings' | 'vacation' | 'vcf_attach' | 'verified' | 'very_satisfied' | 'video_attach' | 'video_camera' | 'video_off' | 'video_play' | 'video' | 'visibility_off' | 'visibility' | 'volte' | 'volume_down' | 'volume_mute' | 'volume_off' | 'volume_up' | 'warning_outline' | 'warning' | 'watch' | 'wav_attach' | 'wb' | 'webm_attach' | 'wifi_0' | 'wifi_1' | 'wifi_2' | 'wifi_alt' | 'wifi_call' | 'wifi_off_alt' | 'wifi_off' | 'wifi' | 'wmv_attach' | 'woff_attach' | 'world' | 'write' | 'xlff_attach' | 'xliff_attach' | 'xls_attach' | 'xlsb_attach' | 'xlsm_attach' | 'xlsx_attach' | 'xml_attach' | 'xsd_attach' | 'xslt_attach' | 'youtube' | 'zero_scale' | 'zip_attach' | 'zoom_in_map' | 'zoom_in' | 'zoom_out_map' | 'zoom_out' | null |
| trailingIcon | Trailing icon of button. Full list of icons can be found at https://design.zebra.com/icons | Zeta Icons. | null | 'medium' | 'email' | 'file' | 'image' | 'search' | 'aac_attach' | 'achievement_sync_outline' | 'achievement_sync' | 'activity' | 'add_alert' | 'add_box' | 'add_call' | 'add_circle_outline' | 'add_circle' | 'add_group' | 'add_person' | 'add' | 'add_task' | 'adjustments' | 'ai_attach' | 'ai_measure' | 'ai_single_star' | 'ai_stars' | 'alarm' | 'alert_active' | 'alert_outline' | 'alert' | 'align_center' | 'align_horizontal_center' | 'align_horizontal_left' | 'align_horizontal_right' | 'align_left' | 'align_right' | 'align_vertical_bottom' | 'align_vertical_center' | 'align_vertical_top' | 'analytics' | 'android' | 'antenna' | 'api_collection' | 'api' | 'app_edit' | 'apps' | 'ar' | 'arrow_back' | 'arrow_down' | 'arrow_forward' | 'arrow_up' | 'asp_attach' | 'attach_3ds' | 'attachment' | 'au_attach' | 'audio' | 'audit_activity' | 'auto_delete' | 'auto' | 'average_current_status' | 'avi_attach' | 'award_star' | 'awb' | 'backspace' | 'bad_mood' | 'barcode_bluetooth' | 'barcode_done' | 'barcode_image_scan' | 'barcode_qr_code' | 'barcode' | 'barcode_scanner_down' | 'barcode_settings' | 'basket' | 'battery_alert' | 'battery_charging' | 'battery' | 'bin_attach' | 'block' | 'blog' | 'bluetooth_disabled' | 'bluetooth' | 'bluetooth_searching' | 'bmp_attach' | 'bold' | 'bookmark_outline' | 'bookmark' | 'brightness' | 'broadcast' | 'build' | 'building' | 'bullet_list' | 'bus' | 'cached' | 'cafe' | 'calculator' | 'calendar_3_day' | 'calendar_alt_1' | 'calendar_alt_2' | 'calendar_available' | 'calendar_day' | 'calendar_edit' | 'calendar_gantt' | 'calendar_monthly' | 'calendar_next' | 'calendar_range' | 'calendar_rollover' | 'calendar' | 'calendar_unavailable' | 'calendar_weekly' | 'calendar_yearly' | 'calibrate_media' | 'call_back' | 'camera' | 'camera_shutter' | 'camera_switch' | 'cancel_outline' | 'cancel' | 'car' | 'card_orientation' | 'card_with_chip' | 'caret_down' | 'caret_left' | 'caret_right' | 'caret_sort' | 'caret_up' | 'cast_connected' | 'cast' | 'category' | 'cellular_signal' | 'certificate' | 'certified' | 'chain' | 'chart_bar' | 'chart_bubble_outline' | 'chart_bubble' | 'chart_doughnut' | 'chart_filled' | 'chart_gantt' | 'chart_line_predict' | 'chart_line' | 'chart_line_stacked' | 'chart_outline' | 'chart_pie_outline' | 'chart_pie' | 'chart_scatter_plot' | 'chart_stacked' | 'chart_waterfall' | 'chat_bot' | 'chat_bubble_outline' | 'chat_bubble' | 'chat_message_read' | 'chat_message_unread' | 'chat' | 'chat_search' | 'chat_sync_outline' | 'chat_sync' | 'check_box_empty' | 'check_box' | 'check_circle_outline_alt' | 'check_circle_outline' | 'check_circle' | 'check_mark' | 'checklist' | 'chevron_left' | 'chevron_right' | 'choices' | 'clipboard_outline' | 'clipboard' | 'clock_available' | 'clock_bid' | 'clock_edit' | 'clock_flexible' | 'clock_in_progress' | 'clock_info' | 'clock_missed' | 'clock_on' | 'clock_outline' | 'clock_rollover' | 'clock' | 'clock_segment' | 'clock_start' | 'clock_stop' | 'clock_switch' | 'clock_timer' | 'clock_upcoming' | 'close' | 'closed_caption' | 'cloud_done' | 'cloud_download' | 'cloud_off' | 'cloud_outline' | 'cloud' | 'cloud_sync' | 'cloud_upload' | 'color_fill' | 'columns' | 'com_attach' | 'comms_chat_new' | 'comms_chat' | 'comms_chat_unread' | 'contactless_pay' | 'contacts_outline' | 'contacts' | 'content' | 'contrast' | 'conversation' | 'copy_file' | 'create_new_folder' | 'credit_card' | 'credit_card_swipe' | 'crop' | 'css_attach' | 'csv_attach' | 'currency_dollar' | 'currency_pound' | 'dark_mode' | 'dashboard' | 'dat_attach' | 'dbf_attach' | 'delete_forever' | 'delete_outline' | 'delete_printer' | 'delete' | 'delete_scanner' | 'desktop' | 'device_settings' | 'devices_ecosystem' | 'devices' | 'dialpad' | 'dislike' | 'distribute_horizontal' | 'distribute_vertical' | 'dll_attach' | 'doc_attach' | 'document' | 'docx_attach' | 'dollar' | 'double_arrow_left' | 'double_arrow_right' | 'download' | 'downloading' | 'drop_down_circle' | 'dwg_attach' | 'eas' | 'edit_border' | 'edit' | 'email_alt' | 'email_outline' | 'email_reply_all' | 'eml_attach' | 'end_call' | 'enterprise_diagnostics' | 'environmental' | 'eps_attach' | 'error_outline' | 'error' | 'ethernet' | 'exe_attach' | 'exit' | 'expand_less' | 'expand_more' | 'export' | 'exposure' | 'ext_attach' | 'eye_dropper' | 'eye_preview' | 'face_id' | 'facebook' | 'factory' | 'fast_forward' | 'fast_rewind' | 'filter_alt' | 'filter_off' | 'filter_outlne' | 'filter' | 'finished_download' | 'fire' | 'first_page' | 'fla_attach' | 'flag' | 'flash_auto' | 'flash_off' | 'flash_on' | 'flight_mode' | 'flight' | 'flip' | 'fodg_attach' | 'fodp_attach' | 'fods_attach' | 'folder_outline' | 'folder' | 'font_size_decrease' | 'font_size_increase' | 'format_shapes' | 'forward' | 'frame_inspect' | 'freezer' | 'full_screen_exit' | 'full_screen' | 'gif_attach' | 'gif' | 'glossary' | 'google_drive' | 'grid_off' | 'grid_on' | 'grid_view' | 'group' | 'groups' | 'hamburger_menu_navigation_rail' | 'hamburger_menu' | 'hamburger_menu_thick' | 'hand' | 'happy' | 'hdmi' | 'hdr' | 'headphones' | 'headset' | 'help_outline' | 'help' | 'history' | 'home' | 'home_sync_outline' | 'home_sync' | 'hourglass' | 'how_do_i' | 'htm_attach' | 'html_attach' | 'ico_attach' | 'image_library' | 'import' | 'important_notification' | 'inbox' | 'incoming_call' | 'incoming_video' | 'indent_decrease' | 'indent_increase' | 'indeterminate_check_box' | 'info' | 'ini_attach' | 'instagram' | 'ios_share' | 'iso_attach' | 'iso' | 'issue_audit' | 'italic' | 'jar_attach' | 'jpeg_attach' | 'jpg_attach' | 'js_attach' | 'json_attach' | 'justify' | 'key_attach' | 'keyboard' | 'label' | 'laptop' | 'las' | 'last_page' | 'layers' | 'left_panel_close' | 'left_panel_open' | 'light_mode' | 'light_rail_train' | 'lightbulb' | 'like' | 'line_spacing' | 'link_add' | 'link' | 'linkedin' | 'list_alt' | 'list_bullet_contained' | 'list_feedback' | 'list_form' | 'list' | 'local_mall' | 'local_shipping' | 'locate_scanner' | 'location_off' | 'location_point' | 'location' | 'locations' | 'lock_alt' | 'lock' | 'lock_undo' | 'log_in' | 'log_out' | 'love_outline' | 'love' | 'maintenance' | 'map' | 'mdb_attach' | 'meal' | 'memory' | 'message' | 'microphone_off' | 'microphone_outline' | 'microphone' | 'microsd' | 'missed_call' | 'missed_video' | 'mkv_attach' | 'mobile_friendly' | 'money_euro' | 'money_pound' | 'money_usd' | 'monitor' | 'more_horizontal' | 'more_vertical' | 'mov_attach' | 'mp3_attach' | 'mp4_attach' | 'mpeg_attach' | 'mpg_attach' | 'mpga_attach' | 'my_location' | 'navigate' | 'navigation' | 'near_me' | 'network_signal' | 'neutral' | 'new_chat' | 'nfc' | 'nfo_attach' | 'night' | 'no_color' | 'no_flash' | 'note' | 'notifications_off' | 'numbered_list' | 'obj_attach' | 'odf_attach' | 'odp_attach' | 'ods_attach' | 'odt_attach' | 'oog_attach' | 'open_in_full' | 'open_in_new_window' | 'open_new_off' | 'otf_attach' | 'ott_attach' | 'outgoing_call' | 'outgoing_video' | 'page_detail' | 'page_height' | 'page_rotate' | 'page_width' | 'palette' | 'partner' | 'pause_circle' | 'pause' | 'payment_card' | 'pdf_attach' | 'pending' | 'person_admin' | 'person_assign' | 'person_clock' | 'person_info' | 'person_manager' | 'person_move' | 'person_outline' | 'person' | 'person_search' | 'person_swap' | 'person_walk' | 'phone_android' | 'phone_bluetooth_speaker' | 'phone_in_talk' | 'phone_iphone' | 'phone' | 'phonelink' | 'phrase' | 'pin' | 'pkg_attach' | 'place_outline' | 'place' | 'planogram' | 'play_circle' | 'play_outline' | 'play' | 'png_attach' | 'point_gift' | 'point_heart' | 'point_money' | 'point_scan' | 'point_star' | 'point_token' | 'portrait' | 'pps_attach' | 'ppt_attach' | 'pptx_attach' | 'price_or_dollar' | 'print_configuration_label' | 'print_directory_list' | 'print_test_label' | 'printer' | 'priority_important' | 'priority' | 'priority_urgent' | 'pro' | 'productivity_apps' | 'psd_attach' | 'ptt' | 'publish' | 'push_pin_off' | 'push_pin_outline' | 'push_pin' | 'qr_code' | 'queue' | 'quote_' | 'radio_button_checked' | 'radio_button_unchecked' | 'rar_attach' | 'react_add' | 'react_thumbsup' | 'read' | 'reboot_scanner' | 'recall' | 'receipt' | 'recording' | 'redo' | 'refresh' | 'remove_box' | 'remove_circle_outline' | 'remove_circle' | 'remove_group' | 'remove_person' | 'remove' | 'renew' | 'reorder' | 'repeat' | 'replay' | 'reply' | 'report' | 'reset_network' | 'restart_alt' | 'restart_printer' | 'restore_network_defaults' | 'restore_printer_defaults' | 'retrieve_scanner_settings' | 'review' | 'road_map' | 'rotate_left' | 'rotate_right' | 'rss_feed' | 'rtf_attach' | 'rules' | 'sad' | 'satisfied' | 'save_alt' | 'save' | 'savings' | 'scan_document' | 'scan_rate' | 'scanner' | 'schedule' | 'school' | 'screen_rotation' | 'sd_card' | 'sdc_attach' | 'sdd_attach' | 'search_check_2' | 'search_checkmark' | 'search_data' | 'search_document' | 'search_file' | 'search_image' | 'search_refresh' | 'search_settings' | 'search_star' | 'search_tab' | 'security_check' | 'security' | 'send' | 'server' | 'setting_tool' | 'settings' | 'shape_recognition' | 'share' | 'shared_folder_filled' | 'shared_folder' | 'ship' | 'shopping_basket' | 'side_bar_toggle' | 'sim_card' | 'siren_check' | 'skip_next' | 'skip_previous' | 'slide_show' | 'smart_phone' | 'sms' | 'snooze' | 'solutions' | 'sort' | 'speaker' | 'star_half' | 'star_outline' | 'star' | 'steps' | 'sticker' | 'stop_circle' | 'stop' | 'store_release' | 'store' | 'store_swap' | 'store_transfer' | 'straighten' | 'strategy' | 'strikethrough' | 'subscribe' | 'svg_attach' | 'swap' | 'swf_attach' | 'switch_user' | 'sync_disabled' | 'sync' | 'table' | 'tablet_mac' | 'tablet' | 'tag_outline' | 'tag' | 'tap_to_pay' | 'target' | 'taxi' | 'text_color' | 'tiers' | 'tif_attach' | 'tiff_attach' | 'timecard_approve' | 'timecard' | 'timecard_warning' | 'timer' | 'to_do_outline' | 'to_do' | 'toggle_off' | 'toggle_on' | 'touch' | 'train' | 'transfer' | 'trending_down' | 'trending_up' | 'ttf_attach' | 'tune' | 'tv' | 'twitter' | 'txt_attach' | 'type' | 'uhf_rfid' | 'underline' | 'undo' | 'unfold_less' | 'unfold_more' | 'universal_currency_alt' | 'universal_currency' | 'unlock_alt' | 'unlock' | 'unsubscribe' | 'update' | 'upload_file' | 'upload' | 'usb_alt' | 'usb' | 'user_circle' | 'user_minor' | 'user' | 'user_settings' | 'vacation' | 'vcf_attach' | 'verified' | 'very_satisfied' | 'video_attach' | 'video_camera' | 'video_off' | 'video_play' | 'video' | 'visibility_off' | 'visibility' | 'volte' | 'volume_down' | 'volume_mute' | 'volume_off' | 'volume_up' | 'warning_outline' | 'warning' | 'watch' | 'wav_attach' | 'wb' | 'webm_attach' | 'wifi_0' | 'wifi_1' | 'wifi_2' | 'wifi_alt' | 'wifi_call' | 'wifi_off_alt' | 'wifi_off' | 'wifi' | 'wmv_attach' | 'woff_attach' | 'world' | 'write' | 'xlff_attach' | 'xliff_attach' | 'xls_attach' | 'xlsb_attach' | 'xlsm_attach' | 'xlsx_attach' | 'xml_attach' | 'xsd_attach' | 'xslt_attach' | 'youtube' | 'zero_scale' | 'zip_attach' | 'zoom_in_map' | 'zoom_in' | 'zoom_out_map' | 'zoom_out' | null |
| shape | Whether the component is sharp, rounded or fully rounded.This will change the border radius and icon font.Possible values are: - sharp: No border radius, uses "zeta-icons-sharp"- rounded: Minimal border radius, uses "zeta-icons-round"- full: Full border radius, uses "zeta-icons-round" | 'sharp' | 'rounded' | 'full' | "rounded" | BaseButton |
| size | Size of component | SizeType | "medium" | BaseButton |
| disabled | Boolean for if component is disabled.This will apply disabled styles. | boolean | false | BaseButton |
| tabIndex | The tab index of the component, used to determine the order in which elements receive focus when the user navigates through the document by pressing the Tab key. | number | 0 | BaseButton |
| type | The type of the button when used in a form | 'reset' | 'submit' | 'button' | undefined | undefined | BaseButton |
| name | Name for the button, used if the button is in a form. | string | undefined | undefined | BaseButton |
| value | The value of the name property When submitted as part of a form | string | undefined | undefined | BaseButton |
CSS Properties
| Name | Description |
|---|---|
| --icon-button-color | (Deprecated: Use --button-color instead) |
| --button-color | The background color of the button when flavor="custom". |
| --button-text-color | The text color of the button when flavor="custom". |
| --icon-button-icon-color | The color of the icon when flavor="custom". |
| --icon-button-icon-color-disabled | The color of the icon when the button is disabled and flavor="custom". |
| --button-disabled-color | The background color of the disabled button when flavor="custom". |
| --button-disabled-text-color | The text color of the disabled button when flavor="custom". |
| --button-hover-color | The background color on hover when flavor="custom" (overrides the default hover filter). |
| --button-active-color | The background color on active/press when flavor="custom" (overrides the default press filter). |
Flutter component not available yet