Skip to content

Side Nav Collapse Button

@astryxdesign/core v0.7.1 · SideNavCollapseButton

Props ​

PropTypeDefaultDescription
labelstring—Button text. When set, the icon-only square becomes a text button with the arrow in front of the label. Left unset, the accessible name follows the state: expand the sidebar or collapse the sidebar.
collapsibleSideNavControlledCollapsible—Controlled { isCollapsed, onCollapsedChange } config. Use it when the button sits outside the SideNav, where the sidebar's own collapse context cannot reach it, and pass the same object to the SideNav. It wins over isCollapsed.
isCollapsedboolean—Controlled collapsed state, for a button placed outside a SideNav. Bind it with v-model:is-collapsed and give the same value to the SideNav, so the two agree.
size'sm' | 'md' | 'lg''sm' inside a SideNav, otherwise 'md'Button size. The default follows the container.

The button renders as a ghost Button: an icon-only square at the resolved size, with the chevron in the button's icon slot.

Events ​

  • update:isCollapsed(isCollapsed: boolean): fires when the button is clicked while isCollapsed is bound. Inside a SideNav the click goes to the sidebar's own toggle instead, and with collapsible the click calls collapsible.onCollapsedChange.

Slots ​

  • default: replaces the chevron icon. The visible text still comes from label.