Button Tile Table of Contents

• Props
• Slots

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultalign alignAlignment of button and description.type ButtonTileAlign =
'top'
'bottom''bottom'aria ariaAdd ARIA attributes.type ButtonTileAriaAttribute = {
  'aria-label'?: string;
  'aria-expanded'?: string;
  'aria-pressed'?: string;
  'aria-haspopup'?: string;
}undefinedaspectRatio 🛠aspect-ratioAspect ratio of the button-tile.type ButtonTileAspectRatio =
'1/1'
'4/3'
'3/4'
'16/9'
'9/16'
'1:1' 🚫
'4:3' 🚫
'3:4' 🚫
'16:9' 🚫
'9:16' 🚫
BreakpointCustomizable<ButtonTileAspectRatio>'4/3'background backgroundAdapts the description and button theme when used on light background image.type ButtonTileBackground =
'light'
'dark'
'auto''dark'compact 🛠compactDisplays the button-tile as compact version with description and button icon only.boolean
BreakpointCustomizable<boolean>falsedescription descriptionDescription text.stringundefineddisabled disabledDisables the button. No events will be triggered while disabled state is active.booleanfalsegradient gradientShow gradient.booleantrueicon iconThe icon shown. By choosing 'none', no icon is displayed.type ButtonTileIcon =
'360'
'4-wheel-drive'
'accessibility'
'active-cabin-ventilation'
'add'
'adjust'
'aggregation'
'arrow-compact-down'
'arrow-compact-left'
'arrow-compact-right'
'arrow-compact-up'
'arrow-double-down'
'arrow-double-left'
'arrow-double-right'
'arrow-double-up'
'arrow-down'
'arrow-first'
'arrow-head-down'
'arrow-head-left'
'arrow-head-right'
'arrow-head-up'
'arrow-last'
'arrow-left'
'arrow-right'
'arrow-up'
'arrows'
'attachment'
'augmented-reality'
'battery-empty'
'battery-empty-co2'
'battery-empty-fuel'
'battery-full'
'battery-half'
'battery-one-quarter'
'battery-three-quarters'
'bell'
'bookmark'
'bookmark-filled'
'brain'
'broadcast'
'cabriolet'
'calculator'
'calendar'
'camera'
'car'
'car-battery'
'card'
'charging-active'
'charging-network'
'charging-state'
'charging-station'
'chart'
'chat'
'check'
'city'
'climate'
'climate-control'
'clock'
'close'
'closed-caption'
'cloud'
'co2-class'
'co2-emission'
'color-picker'
'compare'
'compass'
'configurate'
'copy'
'country-road'
'coupe'
'cubic-capacity'
'cut'
'delete'
'disable'
'dislike'
'dislike-filled'
'document'
'door'
'download'
'drag'
'duration'
'ear'
'edit'
'email'
'error'
'error-filled'
'exclamation'
'exclamation-filled'
'external'
'fast-backward'
'fast-forward'
'file-csv'
'file-excel'
'filter'
'fingerprint'
'flag'
'flash'
'fuel-station'
'garage'
'genuine-parts'
'geo-localization'
'gift'
'globe'
'grid'
'grip'
'group'
'hand'
'heart'
'heart-filled'
'highway'
'highway-filled'
'history'
'home'
'horn'
'image'
'increase'
'information'
'information-filled'
'key'
'laptop'
'leaf'
'leather'
'light'
'like'
'like-filled'
'limousine'
'linked'
'list'
'locate'
'lock'
'lock-open'
'logo-apple-carplay'
'logo-apple-music'
'logo-apple-podcast'
'logo-baidu'
'logo-delicious'
'logo-digg'
'logo-facebook'
'logo-foursquare'
'logo-gmail'
'logo-google'
'logo-hatena'
'logo-instagram'
'logo-kaixin'
'logo-kakaotalk'
'logo-kununu'
'logo-linkedin'
'logo-naver'
'logo-pinterest'
'logo-qq'
'logo-qq-share'
'logo-reddit'
'logo-skyrock'
'logo-snapchat'
'logo-sohu'
'logo-spotify'
'logo-tecent'
'logo-telegram'
'logo-tiktok'
'logo-tumblr'
'logo-twitter'
'logo-viber'
'logo-vk'
'logo-wechat'
'logo-weibo'
'logo-whatsapp'
'logo-x'
'logo-xing'
'logo-yahoo'
'logo-youku'
'logo-youtube'
'logout'
'map'
'menu-dots-horizontal'
'menu-dots-vertical'
'menu-lines'
'microphone'
'minus'
'mobile'
'moon'
'new-chat'
'news'
'none'
'north-arrow'
'oil-can'
'online-search'
'parking-brake'
'parking-light'
'paste'
'pause'
'phone'
'pin'
'pin-filled'
'pivot'
'play'
'plug'
'plus'
'preheating'
'price-tag'
'printer'
'purchase'
'push-pin'
'push-pin-off'
'qr'
'qr-off'
'question'
'question-filled'
'racing-flag'
'radar'
'radio'
'refresh'
'replay'
'reset'
'return'
'road'
'roof-closed'
'roof-open'
'route'
'rss'
'save'
'screen'
'search'
'seat'
'send'
'service-technician'
'share'
'shopping-bag'
'shopping-bag-filled'
'shopping-cart'
'shopping-cart-filled'
'sidebar'
'sidelights'
'skip-backward'
'skip-forward'
'snowflake'
'sort'
'stack'
'star'
'star-filled'
'steering-wheel'
'stop'
'stopwatch'
'subtract'
'success'
'success-filled'
'sun'
'suv'
'switch'
'tablet'
'tachometer'
'theme'
'tire'
'trigger-finger'
'truck'
'turismo'
'unlinked'
'upload'
'user'
'user-filled'
'user-group'
'user-manual'
'video'
'view'
'view-off'
'volume-off'
'volume-up'
'warning'
'warning-filled'
'weather'
'weight'
'wifi'
'work'
'wrench'
'wrenches'
'zoom-in'
'zoom-out''none'iconSource icon-sourceA URL path to a custom icon.stringundefinedlabel labelLabel of the button.stringundefinedloading loadingDisables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.booleanfalsesize 🛠sizeFont size of the description.type ButtonTileSize =
'medium'
'large'
'inherit'
'default' 🚫
BreakpointCustomizable<ButtonTileSize>'medium'type typeSpecifies the type of the button.type ButtonTileType =
'button'
'submit'
'reset''submit'weight 🛠weightFont weight of the description.type ButtonTileWeight =
'regular'
'semi-bold'
BreakpointCustomizable<ButtonTileWeight>'semi-bold'SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="header"> Renders a header section above the content area.<slot> Default slot for the img or picture tag.