chore: display flex internal label of button

casavo · May 16, 2023 · ac25af5 · ac25af5
1 parent 10f146d
commit ac25af5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/design-system/src/App.tsx b/packages/design-system/src/App.tsx
@@ -92,7 +92,9 @@ function App() {
         <IconButton onClick={() => console.log('sono disabilitato')}>
           <EditIcon />
         </IconButton>
-        <Button onClick={() => console.log('hello')}>Hello!</Button>
+        <Button onClick={() => console.log('hello')}>
+          <EditIcon /> Hello!
+        </Button>
       </Box>
       <Box padding="l">
         <Breadcrumbs>

diff --git a/packages/design-system/src/components/Button/Button.css.ts b/packages/design-system/src/components/Button/Button.css.ts
@@ -107,6 +107,9 @@ export const labelStyle = style({
   visibility: 'visible',
   transition: 'visibility 250ms, opacity 150ms',
   opacity: 1,
+  display: 'flex',
+  alignItems: 'center',
+  gap: spacings.s,
   selectors: {
     [`${baseStyle}[data-loading=true] &`]: {
       visibility: 'hidden',