Skip to content

[Task](ui): Add extra-small size to Button component #1638

@MartinS-git

Description

@MartinS-git

Description

Add a new extra-small size variant to the Button component. This size is already defined in the Figma design system and is particularly useful in space-constrained contexts like the DataGrid toolbar, where actions like "Clear all" should have less visual weight and footprint.

Design Reference

Button Extra Small (all variants available: Primary, Default, Primary_Danger, Subdued):

Button Extra Small – Figma

Usage context – DataGrid Toolbar with filter pills and "Remove filters" button (extra-small):

DataGrid Toolbar – Figma


Phase 1: Button component

Add extra-small as a new size option to the Button component.

  • Add "extra-small" to the ButtonSize type
  • Define Tailwind classes for extra-small typography and padding (all variants)
  • Update getButtonPadding, iconClasses, and Spinner size logic to handle the new size
  • Add extra-small stories to Button.stories.tsx
  • Update existing tests or add new tests for the extra-small size
  • Verify visual alignment with Figma

Phase 2: DataGridToolbar usage

Use the new extra-small Button in the DataGridToolbar story as a real-world usage example.

  • Update DataGridToolbar story "Complex Custom Layout": change the "Clear all" button to use size="extra-small"
  • Update story description to mention the extra-small button usage

Metadata

Metadata

Assignees

Labels

ui-componentsAll tasks related to juno-ui-components library

Type

No type

Projects

Status

New

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions