Button Pure Table of Contents

• Props
• Slots
• CSS Variables

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultactive activeDisplay button in active state.booleanfalsealignLabel 🛠align-labelAligns the label.type ButtonPureAlignLabel =
'start'
'end'
'left' 🚫
'right' 🚫
BreakpointCustomizable<ButtonPureAlignLabel>'end'aria ariaAdd ARIA attributes.type ButtonPureAriaAttribute = {
  'aria-label'?: string;
  'aria-description'?: string;
  'aria-expanded'?: string;
  'aria-pressed'?: string;
  'aria-haspopup'?: string;
}undefineddisabled disabledDisables the button. No events will be triggered while disabled state is active.booleanfalseform formThe id of a form element the button should be associated with.stringundefinedhideLabel 🛠hide-labelShow or hide label. For better accessibility it is recommended to show the label.boolean
BreakpointCustomizable<boolean>falseicon iconThe icon shown.type ButtonPureIcon =
''
'360'
'4-wheel-drive'
'accessibility'
'active-cabin-ventilation'
'add'
'adjust'
'aggregation'
'ai-3d-object'
'ai-code'
'ai-edit'
'ai-image'
'ai-scale'
'ai-sound'
'ai-spark'
'ai-spark-filled'
'ai-text'
'ai-video'
'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'
'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''arrow-right'iconSource icon-sourceA URL path to a custom icon.stringundefinedloading loadingDisables the button and shows a loading indicator. No events will be triggered while loading state is active.booleanfalsename nameThe name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.stringundefinedsize 🛠sizeSize of the button.type ButtonPureSize =
'xx-small'
'x-small'
'small'
'medium'
'large'
'x-large'
'inherit'
BreakpointCustomizable<ButtonPureSize>'small'stretch 🛠stretchStretches the area between icon and label to max available space.boolean
BreakpointCustomizable<boolean>falsetheme themeAdapts the button color depending on the theme.type Theme =
'light'
'dark'
'auto''light'type typeSpecifies the type of the button.type ButtonPureType =
'button'
'submit'
'reset''submit'underline underlineShows an underline under the label.booleanfalsevalue valueDefines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.stringundefinedweight 🚫weightThe weight of the text (only has effect with visible label). deprecated since v3.0.0, will be removed with next major releasetype ButtonPureWeight =
'regular'
'semi-bold'
'bold'
'thin' 🚫
'semibold' 🚫'regular'SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot> Default slot for the button label.CSS VariablesCSS VariableDescriptiondefaultValue--p-hyphens Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.auto