How to use the baseui/button.SIZE.compact function in baseui

{({dismiss}) => (
      <button size="{SIZE.compact}">
        Dismiss
      </button>
    )}

const [, theme] = useStyletron();
  const isLightTheme = theme.name.startsWith('light-theme');
  const code = overridesObj[overrideKey] ? overridesObj[overrideKey].style : '';
  return (
    
       {
          set({
            ...overrides.value,
            [overrideKey]: {style: newCode, active: true},
          });
        }}
        code={code}
      />
       ({
              marginTop: $theme.sizing.scale300,
              [`@media screen and (max-width: ${$theme.breakpoints.medium}px)`]: {
                flexWrap: 'wrap',
              },
            }),
          },
        }}
      >
        <button kind="{KIND.tertiary}"> {
            set({
              ...overrides.value,</button>

className={useCss({
          display: 'flex',
          flexWrap: 'wrap',
          [theme.mediaQuery.medium]: {
            flexWrap: 'nowrap',
          },
          margin: `0 -${theme.sizing.scale600}`,
        })}
      >
        
        
      
      {filteredKnobNames.length !== allKnobNames.length && (
        <button size="{SIZE.compact}" kind="{KIND.tertiary}"> setShowAllKnobs(!showAllKnobs)}
        &gt;
          {showAllKnobs ? 'Show only basic props' : 'Show all props'}
        </button>
      )}
    
  );
};

state={state}
          knobNames={firstGroup}
          set={set}
          error={error}
        />
        
      
      {filteredKnobNames.length !== allKnobNames.length && (
        <button size="{SIZE.compact}" kind="{KIND.tertiary}"> setShowAllKnobs(!showAllKnobs)}
        &gt;
          {showAllKnobs ? 'Show only basic props' : 'Show all props'}
        </button>
      )}
    
  );
};

export default () => {
  const [checked, setChecked] = React.useState(true);
  const [focused, setFocused] = React.useState(false);
  const inputRef = React.useRef(null);
  return (
    
      <button size="{SIZE.compact}"> {
          if (inputRef.current === null) return;
          if (focused) {
            inputRef.current.blur();
            setFocused(false);
          } else {
            inputRef.current.focus();
            setFocused(true);
          }
        }}
      &gt;
        Click to focus checkbox
      </button>

//updateUrl({ pathname, code: newCode, queryStringName })
          } catch (e) {
            updateCode(dispatch, newCode);
          }
        }}
        transformToken={tokenProps => {
          const token = tokenProps.children.trim();
          if (mapTokensToProps && mapTokensToProps[token]) {
            return ;
          }
          return <span>;
        }}
      /&gt;
      
       ({
              flexWrap: 'wrap',
              marginTop: $theme.sizing.scale300,
            }),
          },
        }}
      &gt;
        <button kind="{KIND.tertiary}"> {
            updateCode(dispatch, formatCode(state.code));
          }}
        &gt;
          Format</button></span>

Block: {
                        style: {
                          [direction === 'rtl' ? 'left' : 'right']: 0,
                          [direction === 'rtl' ? 'right' : 'left']: 'auto',
                        },
                      },
                    }}
                  >
                    <button> (
                        
                      )}
                      $as="a"
                      href={githubUrl}
                      target="_blank"
                      size={SIZE.compact}
                      kind={KIND.minimal}
                    &gt;
                      Edit this page
                    </button>
                  
                )}
                {componentSizeKb ? (
                  
                    Component size, gzipped: {componentSizeKb}kb
                  
                ) : null}
                
                  {children}

export default () => {
  const [css, theme] = useStyletron();
  const space = css({marginBottom: theme.sizing.scale300});
  return (
    
      <button size="{SIZE.compact}">Compact size</button>
      <div>
      <button size="{SIZE.default}">Default size</button>
      <div>
      <button size="{SIZE.large}">Large size</button>
    
  );
};
</div></div>

const [, theme] = useStyletron();
  const isLightTheme = theme.name.startsWith('light-theme');
  const code = overridesObj[overrideKey] ? overridesObj[overrideKey].style : '';
  return (
    
       {
          set({
            ...overrides.value,
            [overrideKey]: {style: newCode, active: true},
          });
        }}
        code={code}
      />
       ({
              marginTop: $theme.sizing.scale300,
              [`@media screen and (max-width: ${$theme.breakpoints.medium}px)`]: {
                flexWrap: 'wrap',
              },
            }),
          },
        }}
      >
        <button kind="{KIND.tertiary}"> {
            set({
              ...overrides.value,</button>

display: 'none',
                          '@media screen and (min-width: 820px)': {
                            display: 'inline-block',
                          },
                        },
                      },
                    }}
                  >
                    {"What's new in v9?"}
                  
                
              
              
                
                  <button kind="{KIND.minimal}" size="{SIZE.compact}">
                    Components
                  </button>