OctantisWeb.Components.Polaris.Box (octantis v0.1.12)
View SourceBox Box is the most primitive layout component.
Examples
<.box border_color="border" border_width="4">Content</.box> <.box background="bg-magic-hover" border_radius="full" padding={[xs: "400"]} width="586px">Content</.box> See
Summary
Functions
As A helper for setting the underlaying element of a component
Box Box is the most primitive layout component.
Build Class elements
Build Style elements
Functions
As A helper for setting the underlaying element of a component
Attributes
element(:string) (required) - Must be one of"div","span","ul","ol","li", or"fieldset".- Global attributes are accepted.
Slots
inner_block(required)
Box Box is the most primitive layout component.
Examples
<.box border_color="border" border_width="4">Content</.box> <.box background="bg-magic-hover" border_radius="full" padding={[xs: "400"]} width="586px">Content</.box> See
- https://polaris.shopify.com/components/layout-and-structure/box
- https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Box/Box.tsx
Attributes
as(:string) - HTML Element type. Defaults to"div".background(:string) - Must be one of"text-magic","text-magic-strong","text-interactive-inverse","text-interactive","text-interactive-hover","text-interactive-active","text-warning-strong","text-info","text-info-strong","text-caution","text-caution-strong","text-critical","text-critical-active","text-critical-strong","text-primary-hover","text-primary","text-success","text-success-strong","text-on-color","text-inverse","text-inverse-subdued","text-interactive-disabled","text-disabled","text-subdued","text","icon-magic","icon-interactive-inverse","icon-interactive","icon-interactive-hover","icon-interactive-active","icon-warning","icon-info","icon-caution","icon-critical","icon-success","icon-primary","icon-on-color","icon-inverse","icon-interactive-disabled","icon-disabled","icon-subdued","icon-active","icon","icon-hover","border-magic","border-magic-strong","border-interactive-subdued","border-interactive-focus","border-interactive","border-interactive-hover","border-interactive-active","border-info-subdued","border-info","border-caution-subdued","border-caution","border-critical-subdued","border-critical","border-critical-hover","border-critical-active","border-success-subdued","border-success","border-primary","border-interactive-disabled","border-subdued","border-disabled","border","border-strong","border-hover","border-input","border-strong-hover","border-inverse","border-input-hover","bg-magic-subdued","bg-magic-subdued-active","bg-magic-subdued-hover","bg-magic","bg-magic-active","bg-magic-hover","bg-magic-strong","bg-warning","bg-interactive-selected","bg-interactive-subdued","bg-interactive-subdued-hover","bg-interactive-subdued-active","bg-interactive","bg-interactive-hover","bg-interactive-active","bg-info-subdued-hover","bg-info-subdued","bg-info","bg-info-subdued-active","bg-info-strong","bg-caution-subdued-hover","bg-caution-subdued","bg-caution-subdued-active","bg-caution","bg-caution-strong","bg-critical-subdued-hover","bg-critical-subdued","bg-critical","bg-critical-subdued-active","bg-critical-strong","bg-critical-strong-hover","bg-critical-strong-active","bg-primary-subdued-selected","bg-primary-subdued","bg-success-subdued-hover","bg-primary-subdued-hover","bg-success-subdued","bg-success-subdued-active","bg-primary-subdued-active","bg-success","bg-success-strong","bg-primary","bg-primary-hover","bg-primary-active","bg","bg-input","bg-subdued","bg-hover","bg-inset","bg-subdued-hover","bg-active","bg-app-selected","bg-app-hover","bg-app-active","bg-app","bg-interactive-disabled","bg-disabled","bg-subdued-active","bg-strong","bg-strong-active","bg-strong-hover","bg-inverse-active","bg-inverse-hover","bg-inset-strong","bg-inverse","border-magic-secondary","border-critical-secondary","border-brand","border-focus","border-emphasis-active","border-emphasis-hover","border-emphasis","input-border-active","input-border-hover","input-border","border-tertiary","border-secondary","icon-brand","icon-emphasis-active","icon-emphasis-hover","icon-emphasis","icon-secondary","avatar-five-text-on-bg-fill","avatar-four-text-on-bg-fill","avatar-three-text-on-bg-fill","avatar-two-text-on-bg-fill","avatar-one-text-on-bg-fill","avatar-text-on-bg-fill","text-link-inverse","text-inverse-secondary","text-warning","text-info-on-bg-fill","text-tertiary-on-bg-fill","text-critical-hover","text-brand-hover","text-brand","text-emphasis-active","text-emphasis-hover","text-emphasis","text-secondary","avatar-five-bg-fill","avatar-four-bg-fill","avatar-three-bg-fill","avatar-two-bg-fill","avatar-one-bg-fill","avatar-bg-fill","backdrop-bg","bg-fill-brand-disabled","bg-fill-transparent-secondary","bg-fill-disabled","bg-fill-transparent-active","bg-fill-transparent-hover","bg-surface-transparent","bg-fill-inverse-active","bg-fill-inverse-hover","bg-fill-inverse","bg-fill-secondary","bg-surface-magic-hover","bg-surface-magic","bg-fill-magic-secondary-active","bg-fill-magic-secondary-hover","bg-fill-magic-secondary","bg-fill-magic","bg-surface-warning","bg-fill-warning-secondary","bg-fill-warning","bg-surface-info-active","bg-surface-info-hover","bg-surface-info","bg-fill-info-secondary","bg-fill-info","bg-surface-caution-active","bg-surface-caution-hover","bg-surface-caution","bg-fill-caution-secondary","bg-fill-caution","bg-surface-critical-active","bg-surface-critical-hover","bg-surface-critical","bg-fill-critical-secondary","bg-fill-critical-active","bg-fill-critical-hover","bg-fill-critical","bg-surface-success-active","bg-surface-success-hover","bg-surface-success","bg-fill-success-secondary","bg-fill-success-active","bg-fill-success-hover","bg-fill-success","bg-surface-selected","bg-surface-brand-selected","bg-surface-brand-active","bg-surface-brand-hover","bg-surface-brand","bg-fill-brand-active","bg-fill-brand-hover","bg-fill-brand","input-bg-surface-active","input-bg-surface-hover","input-bg-surface","bg-fill-tertiary-active","bg-fill-tertiary-hover","bg-fill-tertiary","bg-surface-tertiary","bg-surface-secondary-active","bg-surface-secondary-hover","bg-surface-secondary","bg-surface-disabled","bg-surface-active","bg-surface-hover","bg-surface","video-thumbnail-play-button-text-on-bg-fill","video-thumbnail-play-button-bg-fill","video-thumbnail-play-button-bg-fill-hover","text-warning-on-bg-fill","text-warning-hover","text-warning-active","text-success-on-bg-fill","text-success-hover","text-success-active","text-magic-on-bg-fill","text-info-hover","text-info-active","text-emphasis-on-bg-fill","text-emphasis-on-bg-fill-hover","text-emphasis-on-bg-fill-active","text-critical-on-bg-fill","text-caution-on-bg-fill","text-caution-hover","text-caution-active","text-brand-on-bg-fill","text-brand-on-bg-fill-hover","text-brand-on-bg-fill-disabled","text-brand-on-bg-fill-active","bg-surface-warning-hover","bg-surface-warning-active","bg-surface-tertiary-hover","bg-surface-tertiary-active","bg-surface-secondary-selected","bg-surface-magic-active","bg-surface-inverse","bg-surface-emphasis","bg-surface-emphasis-hover","bg-surface-emphasis-active","radio-button-bg-surface-disabled","radio-button-icon-disabled","nav-bg-surface","nav-bg-surface-selected","nav-bg-surface-hover","nav-bg-surface-active","nav-bg","text-link","text-link-hover","text-link-active","icon-secondary-hover","icon-secondary-active","bg-fill","bg-fill-warning-hover","bg-fill-warning-active","bg-fill-transparent","bg-fill-transparent-selected","bg-fill-transparent-secondary-hover","bg-fill-transparent-secondary-active","bg-fill-selected","bg-fill-secondary-hover","bg-fill-secondary-active","bg-fill-info-hover","bg-fill-info-active","bg-fill-hover","bg-fill-emphasis","bg-fill-emphasis-hover","bg-fill-emphasis-active","bg-fill-critical-selected","bg-fill-caution-hover","bg-fill-caution-active","bg-fill-brand-selected","bg-fill-active","checkbox-bg-surface-disabled","checkbox-icon-disabled","border-warning","border-inverse-hover", or"border-inverse-active".border_color(:string) - Must be one of"text-magic","text-magic-strong","text-interactive-inverse","text-interactive","text-interactive-hover","text-interactive-active","text-warning-strong","text-info","text-info-strong","text-caution","text-caution-strong","text-critical","text-critical-active","text-critical-strong","text-primary-hover","text-primary","text-success","text-success-strong","text-on-color","text-inverse","text-inverse-subdued","text-interactive-disabled","text-disabled","text-subdued","text","icon-magic","icon-interactive-inverse","icon-interactive","icon-interactive-hover","icon-interactive-active","icon-warning","icon-info","icon-caution","icon-critical","icon-success","icon-primary","icon-on-color","icon-inverse","icon-interactive-disabled","icon-disabled","icon-subdued","icon-active","icon","icon-hover","border-magic","border-magic-strong","border-interactive-subdued","border-interactive-focus","border-interactive","border-interactive-hover","border-interactive-active","border-info-subdued","border-info","border-caution-subdued","border-caution","border-critical-subdued","border-critical","border-critical-hover","border-critical-active","border-success-subdued","border-success","border-primary","border-interactive-disabled","border-subdued","border-disabled","border","border-strong","border-hover","border-input","border-strong-hover","border-inverse","border-input-hover","bg-magic-subdued","bg-magic-subdued-active","bg-magic-subdued-hover","bg-magic","bg-magic-active","bg-magic-hover","bg-magic-strong","bg-warning","bg-interactive-selected","bg-interactive-subdued","bg-interactive-subdued-hover","bg-interactive-subdued-active","bg-interactive","bg-interactive-hover","bg-interactive-active","bg-info-subdued-hover","bg-info-subdued","bg-info","bg-info-subdued-active","bg-info-strong","bg-caution-subdued-hover","bg-caution-subdued","bg-caution-subdued-active","bg-caution","bg-caution-strong","bg-critical-subdued-hover","bg-critical-subdued","bg-critical","bg-critical-subdued-active","bg-critical-strong","bg-critical-strong-hover","bg-critical-strong-active","bg-primary-subdued-selected","bg-primary-subdued","bg-success-subdued-hover","bg-primary-subdued-hover","bg-success-subdued","bg-success-subdued-active","bg-primary-subdued-active","bg-success","bg-success-strong","bg-primary","bg-primary-hover","bg-primary-active","bg","bg-input","bg-subdued","bg-hover","bg-inset","bg-subdued-hover","bg-active","bg-app-selected","bg-app-hover","bg-app-active","bg-app","bg-interactive-disabled","bg-disabled","bg-subdued-active","bg-strong","bg-strong-active","bg-strong-hover","bg-inverse-active","bg-inverse-hover","bg-inset-strong","bg-inverse","border-magic-secondary","border-critical-secondary","border-brand","border-focus","border-emphasis-active","border-emphasis-hover","border-emphasis","input-border-active","input-border-hover","input-border","border-tertiary","border-secondary","icon-brand","icon-emphasis-active","icon-emphasis-hover","icon-emphasis","icon-secondary","avatar-five-text-on-bg-fill","avatar-four-text-on-bg-fill","avatar-three-text-on-bg-fill","avatar-two-text-on-bg-fill","avatar-one-text-on-bg-fill","avatar-text-on-bg-fill","text-link-inverse","text-inverse-secondary","text-warning","text-info-on-bg-fill","text-tertiary-on-bg-fill","text-critical-hover","text-brand-hover","text-brand","text-emphasis-active","text-emphasis-hover","text-emphasis","text-secondary","avatar-five-bg-fill","avatar-four-bg-fill","avatar-three-bg-fill","avatar-two-bg-fill","avatar-one-bg-fill","avatar-bg-fill","backdrop-bg","bg-fill-brand-disabled","bg-fill-transparent-secondary","bg-fill-disabled","bg-fill-transparent-active","bg-fill-transparent-hover","bg-surface-transparent","bg-fill-inverse-active","bg-fill-inverse-hover","bg-fill-inverse","bg-fill-secondary","bg-surface-magic-hover","bg-surface-magic","bg-fill-magic-secondary-active","bg-fill-magic-secondary-hover","bg-fill-magic-secondary","bg-fill-magic","bg-surface-warning","bg-fill-warning-secondary","bg-fill-warning","bg-surface-info-active","bg-surface-info-hover","bg-surface-info","bg-fill-info-secondary","bg-fill-info","bg-surface-caution-active","bg-surface-caution-hover","bg-surface-caution","bg-fill-caution-secondary","bg-fill-caution","bg-surface-critical-active","bg-surface-critical-hover","bg-surface-critical","bg-fill-critical-secondary","bg-fill-critical-active","bg-fill-critical-hover","bg-fill-critical","bg-surface-success-active","bg-surface-success-hover","bg-surface-success","bg-fill-success-secondary","bg-fill-success-active","bg-fill-success-hover","bg-fill-success","bg-surface-selected","bg-surface-brand-selected","bg-surface-brand-active","bg-surface-brand-hover","bg-surface-brand","bg-fill-brand-active","bg-fill-brand-hover","bg-fill-brand","input-bg-surface-active","input-bg-surface-hover","input-bg-surface","bg-fill-tertiary-active","bg-fill-tertiary-hover","bg-fill-tertiary","bg-surface-tertiary","bg-surface-secondary-active","bg-surface-secondary-hover","bg-surface-secondary","bg-surface-disabled","bg-surface-active","bg-surface-hover","bg-surface","video-thumbnail-play-button-text-on-bg-fill","video-thumbnail-play-button-bg-fill","video-thumbnail-play-button-bg-fill-hover","text-warning-on-bg-fill","text-warning-hover","text-warning-active","text-success-on-bg-fill","text-success-hover","text-success-active","text-magic-on-bg-fill","text-info-hover","text-info-active","text-emphasis-on-bg-fill","text-emphasis-on-bg-fill-hover","text-emphasis-on-bg-fill-active","text-critical-on-bg-fill","text-caution-on-bg-fill","text-caution-hover","text-caution-active","text-brand-on-bg-fill","text-brand-on-bg-fill-hover","text-brand-on-bg-fill-disabled","text-brand-on-bg-fill-active","bg-surface-warning-hover","bg-surface-warning-active","bg-surface-tertiary-hover","bg-surface-tertiary-active","bg-surface-secondary-selected","bg-surface-magic-active","bg-surface-inverse","bg-surface-emphasis","bg-surface-emphasis-hover","bg-surface-emphasis-active","radio-button-bg-surface-disabled","radio-button-icon-disabled","nav-bg-surface","nav-bg-surface-selected","nav-bg-surface-hover","nav-bg-surface-active","nav-bg","text-link","text-link-hover","text-link-active","icon-secondary-hover","icon-secondary-active","bg-fill","bg-fill-warning-hover","bg-fill-warning-active","bg-fill-transparent","bg-fill-transparent-selected","bg-fill-transparent-secondary-hover","bg-fill-transparent-secondary-active","bg-fill-selected","bg-fill-secondary-hover","bg-fill-secondary-active","bg-fill-info-hover","bg-fill-info-active","bg-fill-hover","bg-fill-emphasis","bg-fill-emphasis-hover","bg-fill-emphasis-active","bg-fill-critical-selected","bg-fill-caution-hover","bg-fill-caution-active","bg-fill-brand-selected","bg-fill-active","checkbox-bg-surface-disabled","checkbox-icon-disabled","border-warning","border-inverse-hover", or"border-inverse-active".border_style(:string) - Must be one of"solid","dashed", ornil.border_radius(:string) - Must be one of"6","5","4","3","2","1","05","full","750","500","400","300","200","150","100","050", or"0".border_radius_end_start(:string) - Must be one of"6","5","4","3","2","1","05","full","750","500","400","300","200","150","100","050", or"0".border_radius_end_end(:string) - Must be one of"6","5","4","3","2","1","05","full","750","500","400","300","200","150","100","050", or"0".border_radius_start_start(:string) - Must be one of"6","5","4","3","2","1","05","full","750","500","400","300","200","150","100","050", or"0".border_radius_start_end(:string) - Must be one of"6","5","4","3","2","1","05","full","750","500","400","300","200","150","100","050", or"0".border_start_start_radius(:string) - Must be one of"6","5","4","3","2","1","05","full","750","500","400","300","200","150","100","050", or"0".border_start_end_radius(:string) - Must be one of"6","5","4","3","2","1","05","full","750","500","400","300","200","150","100","050", or"0".border_end_start_radius(:string) - Must be one of"6","5","4","3","2","1","05","full","750","500","400","300","200","150","100","050", or"0".border_end_end_radius(:string) - Must be one of"width-5","width-4","width-3","width-2","width-1","width-100","width-050","width-025","width-0165","radius-6","radius-5","radius-4","radius-3","radius-2","radius-1","radius-05","radius-full","radius-750","radius-500","radius-400","radius-300","radius-200","radius-150","radius-100","radius-050", or"radius-0".border_width(:string) - Must be one of"5","4","3","2","1","100","050","025", or"0165".border_block_start_width(:string) - Must be one of"5","4","3","2","1","100","050","025", or"0165".border_block_end_width(:string) - Must be one of"5","4","3","2","1","100","050","025", or"0165".border_inline_start_width(:string) - Must be one of"5","4","3","2","1","100","050","025", or"0165".border_inline_end_width(:string) - Must be one of"5","4","3","2","1","100","050","025", or"0165".color(:string) - Must be one of"text-magic","text-magic-strong","text-interactive-inverse","text-interactive","text-interactive-hover","text-interactive-active","text-warning-strong","text-info","text-info-strong","text-caution","text-caution-strong","text-critical","text-critical-active","text-critical-strong","text-primary-hover","text-primary","text-success","text-success-strong","text-on-color","text-inverse","text-inverse-subdued","text-interactive-disabled","text-disabled","text-subdued","text","icon-magic","icon-interactive-inverse","icon-interactive","icon-interactive-hover","icon-interactive-active","icon-warning","icon-info","icon-caution","icon-critical","icon-success","icon-primary","icon-on-color","icon-inverse","icon-interactive-disabled","icon-disabled","icon-subdued","icon-active","icon","icon-hover","border-magic","border-magic-strong","border-interactive-subdued","border-interactive-focus","border-interactive","border-interactive-hover","border-interactive-active","border-info-subdued","border-info","border-caution-subdued","border-caution","border-critical-subdued","border-critical","border-critical-hover","border-critical-active","border-success-subdued","border-success","border-primary","border-interactive-disabled","border-subdued","border-disabled","border","border-strong","border-hover","border-input","border-strong-hover","border-inverse","border-input-hover","bg-magic-subdued","bg-magic-subdued-active","bg-magic-subdued-hover","bg-magic","bg-magic-active","bg-magic-hover","bg-magic-strong","bg-warning","bg-interactive-selected","bg-interactive-subdued","bg-interactive-subdued-hover","bg-interactive-subdued-active","bg-interactive","bg-interactive-hover","bg-interactive-active","bg-info-subdued-hover","bg-info-subdued","bg-info","bg-info-subdued-active","bg-info-strong","bg-caution-subdued-hover","bg-caution-subdued","bg-caution-subdued-active","bg-caution","bg-caution-strong","bg-critical-subdued-hover","bg-critical-subdued","bg-critical","bg-critical-subdued-active","bg-critical-strong","bg-critical-strong-hover","bg-critical-strong-active","bg-primary-subdued-selected","bg-primary-subdued","bg-success-subdued-hover","bg-primary-subdued-hover","bg-success-subdued","bg-success-subdued-active","bg-primary-subdued-active","bg-success","bg-success-strong","bg-primary","bg-primary-hover","bg-primary-active","bg","bg-input","bg-subdued","bg-hover","bg-inset","bg-subdued-hover","bg-active","bg-app-selected","bg-app-hover","bg-app-active","bg-app","bg-interactive-disabled","bg-disabled","bg-subdued-active","bg-strong","bg-strong-active","bg-strong-hover","bg-inverse-active","bg-inverse-hover","bg-inset-strong","bg-inverse","border-magic-secondary","border-critical-secondary","border-brand","border-focus","border-emphasis-active","border-emphasis-hover","border-emphasis","input-border-active","input-border-hover","input-border","border-tertiary","border-secondary","icon-brand","icon-emphasis-active","icon-emphasis-hover","icon-emphasis","icon-secondary","avatar-five-text-on-bg-fill","avatar-four-text-on-bg-fill","avatar-three-text-on-bg-fill","avatar-two-text-on-bg-fill","avatar-one-text-on-bg-fill","avatar-text-on-bg-fill","text-link-inverse","text-inverse-secondary","text-warning","text-info-on-bg-fill","text-tertiary-on-bg-fill","text-critical-hover","text-brand-hover","text-brand","text-emphasis-active","text-emphasis-hover","text-emphasis","text-secondary","avatar-five-bg-fill","avatar-four-bg-fill","avatar-three-bg-fill","avatar-two-bg-fill","avatar-one-bg-fill","avatar-bg-fill","backdrop-bg","bg-fill-brand-disabled","bg-fill-transparent-secondary","bg-fill-disabled","bg-fill-transparent-active","bg-fill-transparent-hover","bg-surface-transparent","bg-fill-inverse-active","bg-fill-inverse-hover","bg-fill-inverse","bg-fill-secondary","bg-surface-magic-hover","bg-surface-magic","bg-fill-magic-secondary-active","bg-fill-magic-secondary-hover","bg-fill-magic-secondary","bg-fill-magic","bg-surface-warning","bg-fill-warning-secondary","bg-fill-warning","bg-surface-info-active","bg-surface-info-hover","bg-surface-info","bg-fill-info-secondary","bg-fill-info","bg-surface-caution-active","bg-surface-caution-hover","bg-surface-caution","bg-fill-caution-secondary","bg-fill-caution","bg-surface-critical-active","bg-surface-critical-hover","bg-surface-critical","bg-fill-critical-secondary","bg-fill-critical-active","bg-fill-critical-hover","bg-fill-critical","bg-surface-success-active","bg-surface-success-hover","bg-surface-success","bg-fill-success-secondary","bg-fill-success-active","bg-fill-success-hover","bg-fill-success","bg-surface-selected","bg-surface-brand-selected","bg-surface-brand-active","bg-surface-brand-hover","bg-surface-brand","bg-fill-brand-active","bg-fill-brand-hover","bg-fill-brand","input-bg-surface-active","input-bg-surface-hover","input-bg-surface","bg-fill-tertiary-active","bg-fill-tertiary-hover","bg-fill-tertiary","bg-surface-tertiary","bg-surface-secondary-active","bg-surface-secondary-hover","bg-surface-secondary","bg-surface-disabled","bg-surface-active","bg-surface-hover","bg-surface","video-thumbnail-play-button-text-on-bg-fill","video-thumbnail-play-button-bg-fill","video-thumbnail-play-button-bg-fill-hover","text-warning-on-bg-fill","text-warning-hover","text-warning-active","text-success-on-bg-fill","text-success-hover","text-success-active","text-magic-on-bg-fill","text-info-hover","text-info-active","text-emphasis-on-bg-fill","text-emphasis-on-bg-fill-hover","text-emphasis-on-bg-fill-active","text-critical-on-bg-fill","text-caution-on-bg-fill","text-caution-hover","text-caution-active","text-brand-on-bg-fill","text-brand-on-bg-fill-hover","text-brand-on-bg-fill-disabled","text-brand-on-bg-fill-active","bg-surface-warning-hover","bg-surface-warning-active","bg-surface-tertiary-hover","bg-surface-tertiary-active","bg-surface-secondary-selected","bg-surface-magic-active","bg-surface-inverse","bg-surface-emphasis","bg-surface-emphasis-hover","bg-surface-emphasis-active","radio-button-bg-surface-disabled","radio-button-icon-disabled","nav-bg-surface","nav-bg-surface-selected","nav-bg-surface-hover","nav-bg-surface-active","nav-bg","text-link","text-link-hover","text-link-active","icon-secondary-hover","icon-secondary-active","bg-fill","bg-fill-warning-hover","bg-fill-warning-active","bg-fill-transparent","bg-fill-transparent-selected","bg-fill-transparent-secondary-hover","bg-fill-transparent-secondary-active","bg-fill-selected","bg-fill-secondary-hover","bg-fill-secondary-active","bg-fill-info-hover","bg-fill-info-active","bg-fill-hover","bg-fill-emphasis","bg-fill-emphasis-hover","bg-fill-emphasis-active","bg-fill-critical-selected","bg-fill-caution-hover","bg-fill-caution-active","bg-fill-brand-selected","bg-fill-active","checkbox-bg-surface-disabled","checkbox-icon-disabled","border-warning","border-inverse-hover", or"border-inverse-active".min_height(:string)min_width(:string)max_width(:string)overflow_x(:string)overflow_y(:string)padding(:list) - A tuple with the size and Space token.Examples include[xs: "400", lg: "500"].padding_block_start(:list) - A tuple with the size and Space token.Examples include[xs: "400", lg: "500"].padding_block_end(:list) - A tuple with the size and Space token.Examples include[xs: "400", lg: "500"].padding_inline_start(:list) - A tuple with the size and Space token.Examples include[xs: "400", lg: "500"].padding_inline_end(:list) - A tuple with the size and Space token.Examples include[xs: "400", lg: "500"].shadow(:string) - Must be one of"2xl","xl","lg","md","sm","xs","none","inset-sm","inset-md","inset-lg","border-inset","button-primary-success-inset","button-primary-success-hover","button-primary-success","button-primary-critical-inset","button-primary-critical-hover","button-primary-critical","button-primary-inset","button-primary-hover","button-primary","button-inset","button-hover","button","inset-200","inset-100","bevel-100","600","500","400","300","200","100", or"0".width(:string)position(:string)inset_block_start(:string) - Must be one of"32","28","24","20","16","12","10","8","6","5","4","3","2","1","05","table-cell-padding","card-padding","card-gap","button-group-gap","3200","2800","2400","2000","1600","1200","1000","800","600","500","400","300","200","150","100","050","025", or"0".inset_block_end(:string) - Must be one of"32","28","24","20","16","12","10","8","6","5","4","3","2","1","05","table-cell-padding","card-padding","card-gap","button-group-gap","3200","2800","2400","2000","1600","1200","1000","800","600","500","400","300","200","150","100","050","025", or"0".inset_inline_start(:string) - Must be one of"32","28","24","20","16","12","10","8","6","5","4","3","2","1","05","table-cell-padding","card-padding","card-gap","button-group-gap","3200","2800","2400","2000","1600","1200","1000","800","600","500","400","300","200","150","100","050","025", or"0".inset_inline_end(:string) - Must be one of"32","28","24","20","16","12","10","8","6","5","4","3","2","1","05","table-cell-padding","card-padding","card-gap","button-group-gap","3200","2800","2400","2000","1600","1200","1000","800","600","500","400","300","200","150","100","050","025", or"0".opacity(:string)outline_color(:string) - Must be one of"text-magic","text-magic-strong","text-interactive-inverse","text-interactive","text-interactive-hover","text-interactive-active","text-warning-strong","text-info","text-info-strong","text-caution","text-caution-strong","text-critical","text-critical-active","text-critical-strong","text-primary-hover","text-primary","text-success","text-success-strong","text-on-color","text-inverse","text-inverse-subdued","text-interactive-disabled","text-disabled","text-subdued","text","icon-magic","icon-interactive-inverse","icon-interactive","icon-interactive-hover","icon-interactive-active","icon-warning","icon-info","icon-caution","icon-critical","icon-success","icon-primary","icon-on-color","icon-inverse","icon-interactive-disabled","icon-disabled","icon-subdued","icon-active","icon","icon-hover","border-magic","border-magic-strong","border-interactive-subdued","border-interactive-focus","border-interactive","border-interactive-hover","border-interactive-active","border-info-subdued","border-info","border-caution-subdued","border-caution","border-critical-subdued","border-critical","border-critical-hover","border-critical-active","border-success-subdued","border-success","border-primary","border-interactive-disabled","border-subdued","border-disabled","border","border-strong","border-hover","border-input","border-strong-hover","border-inverse","border-input-hover","bg-magic-subdued","bg-magic-subdued-active","bg-magic-subdued-hover","bg-magic","bg-magic-active","bg-magic-hover","bg-magic-strong","bg-warning","bg-interactive-selected","bg-interactive-subdued","bg-interactive-subdued-hover","bg-interactive-subdued-active","bg-interactive","bg-interactive-hover","bg-interactive-active","bg-info-subdued-hover","bg-info-subdued","bg-info","bg-info-subdued-active","bg-info-strong","bg-caution-subdued-hover","bg-caution-subdued","bg-caution-subdued-active","bg-caution","bg-caution-strong","bg-critical-subdued-hover","bg-critical-subdued","bg-critical","bg-critical-subdued-active","bg-critical-strong","bg-critical-strong-hover","bg-critical-strong-active","bg-primary-subdued-selected","bg-primary-subdued","bg-success-subdued-hover","bg-primary-subdued-hover","bg-success-subdued","bg-success-subdued-active","bg-primary-subdued-active","bg-success","bg-success-strong","bg-primary","bg-primary-hover","bg-primary-active","bg","bg-input","bg-subdued","bg-hover","bg-inset","bg-subdued-hover","bg-active","bg-app-selected","bg-app-hover","bg-app-active","bg-app","bg-interactive-disabled","bg-disabled","bg-subdued-active","bg-strong","bg-strong-active","bg-strong-hover","bg-inverse-active","bg-inverse-hover","bg-inset-strong","bg-inverse","border-magic-secondary","border-critical-secondary","border-brand","border-focus","border-emphasis-active","border-emphasis-hover","border-emphasis","input-border-active","input-border-hover","input-border","border-tertiary","border-secondary","icon-brand","icon-emphasis-active","icon-emphasis-hover","icon-emphasis","icon-secondary","avatar-five-text-on-bg-fill","avatar-four-text-on-bg-fill","avatar-three-text-on-bg-fill","avatar-two-text-on-bg-fill","avatar-one-text-on-bg-fill","avatar-text-on-bg-fill","text-link-inverse","text-inverse-secondary","text-warning","text-info-on-bg-fill","text-tertiary-on-bg-fill","text-critical-hover","text-brand-hover","text-brand","text-emphasis-active","text-emphasis-hover","text-emphasis","text-secondary","avatar-five-bg-fill","avatar-four-bg-fill","avatar-three-bg-fill","avatar-two-bg-fill","avatar-one-bg-fill","avatar-bg-fill","backdrop-bg","bg-fill-brand-disabled","bg-fill-transparent-secondary","bg-fill-disabled","bg-fill-transparent-active","bg-fill-transparent-hover","bg-surface-transparent","bg-fill-inverse-active","bg-fill-inverse-hover","bg-fill-inverse","bg-fill-secondary","bg-surface-magic-hover","bg-surface-magic","bg-fill-magic-secondary-active","bg-fill-magic-secondary-hover","bg-fill-magic-secondary","bg-fill-magic","bg-surface-warning","bg-fill-warning-secondary","bg-fill-warning","bg-surface-info-active","bg-surface-info-hover","bg-surface-info","bg-fill-info-secondary","bg-fill-info","bg-surface-caution-active","bg-surface-caution-hover","bg-surface-caution","bg-fill-caution-secondary","bg-fill-caution","bg-surface-critical-active","bg-surface-critical-hover","bg-surface-critical","bg-fill-critical-secondary","bg-fill-critical-active","bg-fill-critical-hover","bg-fill-critical","bg-surface-success-active","bg-surface-success-hover","bg-surface-success","bg-fill-success-secondary","bg-fill-success-active","bg-fill-success-hover","bg-fill-success","bg-surface-selected","bg-surface-brand-selected","bg-surface-brand-active","bg-surface-brand-hover","bg-surface-brand","bg-fill-brand-active","bg-fill-brand-hover","bg-fill-brand","input-bg-surface-active","input-bg-surface-hover","input-bg-surface","bg-fill-tertiary-active","bg-fill-tertiary-hover","bg-fill-tertiary","bg-surface-tertiary","bg-surface-secondary-active","bg-surface-secondary-hover","bg-surface-secondary","bg-surface-disabled","bg-surface-active","bg-surface-hover","bg-surface","video-thumbnail-play-button-text-on-bg-fill","video-thumbnail-play-button-bg-fill","video-thumbnail-play-button-bg-fill-hover","text-warning-on-bg-fill","text-warning-hover","text-warning-active","text-success-on-bg-fill","text-success-hover","text-success-active","text-magic-on-bg-fill","text-info-hover","text-info-active","text-emphasis-on-bg-fill","text-emphasis-on-bg-fill-hover","text-emphasis-on-bg-fill-active","text-critical-on-bg-fill","text-caution-on-bg-fill","text-caution-hover","text-caution-active","text-brand-on-bg-fill","text-brand-on-bg-fill-hover","text-brand-on-bg-fill-disabled","text-brand-on-bg-fill-active","bg-surface-warning-hover","bg-surface-warning-active","bg-surface-tertiary-hover","bg-surface-tertiary-active","bg-surface-secondary-selected","bg-surface-magic-active","bg-surface-inverse","bg-surface-emphasis","bg-surface-emphasis-hover","bg-surface-emphasis-active","radio-button-bg-surface-disabled","radio-button-icon-disabled","nav-bg-surface","nav-bg-surface-selected","nav-bg-surface-hover","nav-bg-surface-active","nav-bg","text-link","text-link-hover","text-link-active","icon-secondary-hover","icon-secondary-active","bg-fill","bg-fill-warning-hover","bg-fill-warning-active","bg-fill-transparent","bg-fill-transparent-selected","bg-fill-transparent-secondary-hover","bg-fill-transparent-secondary-active","bg-fill-selected","bg-fill-secondary-hover","bg-fill-secondary-active","bg-fill-info-hover","bg-fill-info-active","bg-fill-hover","bg-fill-emphasis","bg-fill-emphasis-hover","bg-fill-emphasis-active","bg-fill-critical-selected","bg-fill-caution-hover","bg-fill-caution-active","bg-fill-brand-selected","bg-fill-active","checkbox-bg-surface-disabled","checkbox-icon-disabled","border-warning","border-inverse-hover", or"border-inverse-active".outline_style(:string)outline_width(:string) - Must be one of"5","4","3","2","1","100","050","025", or"0165".print_hidden(:boolean) - Visually hide the contents during print.visually_hidden(:boolean) - Visually hide the contents (still announced by screenreader).class(:any) - A class name to be added to the component class name. Defaults to"".style(:string) - Style attribute.display(:string) - Style attribute.margin(:string) - Style attribute.max_height(:string) - Style attribute.object_fit(:string) - Style attribute.flex_grow(:string) - Style attribute.justify_content(:string) - Style attribute.grid_auto_rows(:string) - Style attribute.grid_template_columns(:string) - Style attribute.grid_template_rows(:string) - Style attribute.align_items(:string) - Style attribute.align_self(:string) - Style attribute.- Global attributes are accepted.
Slots
inner_block(required)
Build Class elements
Build Style elements